微信小程序导航栏点击排他思想

微信小程序导航栏点击排他思想

<!--components/Tabs/Tabs.wxml-->
<text>components/Tabs/Tabs.wxml</text>
<view class="tabs">
  <view class="tab_title">
    <view class="tab_item {{num===index?'active':''}}" wx:for="{{tabData}}" wx:key="id" bindtap="changeActive"
      data-index="{{index}}">
      {{item.name}}
    </view>
  </view>
  <view class="tab_content"></view>
</view>

/* components/Tabs/Tabs.wxss */
.tabs .tab_title{
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10rpx;
}

.active{
  color:red;
  border-bottom: 1px solid currentColor;
}

// components/Tabs/Tabs.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    num:0,
    tabData: [{
      id: 0,
      name: "首页",
      isActive: true,
    }, {
      id: 1,
      name: "原创",
      isActive: false
    }, {
      id: 2,
      name: "分类",
      isActive: false
    }, {
      id: 3,
      name: "关于",
      isActive: false
    }]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /* 导航点击事件 */
    changeActive(e) {
      console.log(e);
      this.setData({
        num:e.target.dataset.index
      })
    }
  }
})

注意：使用bind绑定事件的时候，不能进行传参，只能通过data-*自定义属性进行传参