微信小程序的子传父，选项卡切换，下面的内容同时切换

最新推荐文章于 2024-07-14 14:34:08 发布

m0_71204755

最新推荐文章于 2024-07-14 14:34:08 发布

阅读量102

点赞数

文章标签：微信小程序 notepad++ 小程序

本文链接：https://blog.csdn.net/m0_71204755/article/details/140112286

版权

子组件navbar wxml

<view class="box">
  <view wx:for="{{dataList}}" wx:key="index" class="{{current === index?'active':''}}" bindtap="handelClick" data-index="{{index}}">{{item}}</view>
</view>

子组件js

//接收父组件传过来的属性值
 properties: {
    dataList:{
      type:Array,
      value:''
    },
    current:{
      type:Number,
      value:0
    }
  },


//通过方法this.triggerEvent把点击的index传给父组件
 methods: {
    handelClick(evt){

        this.triggerEvent('PrentEvent',evt.currentTarget.dataset.index)
    }

  }

父组件wxml

//dataList="{{dataList}}" 父组件传给子组件的datalist
//current="{{current}}" 父组件把索引传给子组件
//bindPrentEvent="changeEvent" 接收子组件传过来的属性
<navbar dataList="{{dataList}}" current="{{current}}" bindPrentEvent="changeEvent"></navbar>



// current="{{current}}" 轮播的索引
//bindchange="handelChange"轮播的current 改变时会触发 change 事件
<swiper bindchange="handelChange" current="{{current}}" >
  <swiper-item wx:for="{{dataItem}}" wx:key="index">{{item}}</swiper-item>
</swiper>

父组件的js

  data: {
    dataList:['待付款','已付款','已完成'],
    dataItem:['待付款内容','已付款内容','已完成内容'],
    current:0
  },

  handelChange(evt){
    this.setData({
      current:evt.detail.current
    })
  },

  changeEvent(evt){
    this.setData({
      current:evt.detail
    })
  },

显示效果：点击navbar时下面的内容联动，轮播下面的内容时，tabbar跟着高亮