标签：index 菜单 name item 切换 tab tabs111 id isActive

实现效果

当我在首页和原创两个菜单之间切换的时候，下面显示不同的内容

父组件wxml

<Tabs tabsss="{{tabs111}}" bind:itemChange="handle_itemChange" class="Tabs">
    <block wx:if="{{tabs111[0].isActive}}">哈哈哈</block>
    <block wx:elif="{{tabs111[1].isActive}}">嗯嗯嗯</block>
    <block wx:elif="{{tabs111[2].isActive}}">呃呃呃</block>
    <block wx:else="{{tabs111[3].isActive}}">嘿嘿嘿</block>
</Tabs>

父组件js

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

  // 自定义事件，用来接收子组件传递的数据的
  handle_itemChange(e) {
    console.log(e)
    const index = e.detail
    // console.log(index)
    let tabs = JSON.parse(JSON.stringify(this.data.tabs111))

    tabs.forEach((item, index111) => {
      index111 === index ? item.isActive = true : item.isActive = false
    })

     // 重新赋值
     this.setData({
      tabs111: tabs
    })
  },
  onl oad: function (options) {

  }
})

子组件 Tabs.wxml

<view class="tabs">
  <view class="tabs_title">
    <!-- data-index  自定义属性事件传参 -->
    <view
      wx:for="{{tabsss}}"
      wx:key="id"
      class="title_item {{item.isActive?'active':''}}"
      bindtap="_handle_item_tap"
      data-index="{{index}}"
    >
      {{item.name}}
    </view>
  </view>
  <view class="tabs_content">
    <slot></slot>
  </view>
</view>

子组件Tabs.js

Component({
  properties: {
    tabsss: {
      type: Array,
      value: []
    }
  },
  data: { 
  
  },
  methods: {
    _handle_item_tap(e) {
      const index222 = e.currentTarget.dataset.index
      this.triggerEvent("itemChange",index222)
    }
  }
})

子组件Tabs.wxss

.tabs_title {
  display: flex;
  padding: 10rpx;
}

.title_item {
  display: flex;
  flex:1;
  justify-content: center;
  align-items: center;
}

.active {
  color: red;
  border-bottom: 5rpx solid currentColor;
}

标签：index,菜单,name,item,切换,tab,tabs111,id,isActive
来源： https://blog.csdn.net/weixin_43550562/article/details/120430309

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。