原理

• 子层向父层传递数据和绑定点击按钮显示不同的数据
  • （若需了解子层向父层传递数据转这里 小程序-自定义组件数据传递 ）
• 这里核心是点击显示数据我们采用了子层向父层：this.triggerEvent('tabclick', data, {})
• 父层接收：bindtabclick="handleTabClick"

设计父层

父层wxml

<w-tab-control titles="{{titles}}" bindtabclick="handleTabClick"class="{{isTabFixed?'fixed':''}}" /> <w-tab-control wx:if="{{isTabFixed}}" />

父层js

const types = ['pop', 'new', 'sell']
Page({
    /**     * 页面的初始数据     */
    data: {
        currentType: 'pop',
    },
   
    handleTabClick(event) {
        //console.log(event)
        //取出index
        const index = event.detail.index;
        console.log(index);
        //修改currentType
        const type = types[index]
        this.setData({
            currentType: type
            //currenttype:types[index]
        })
    }
})

设计子层

子层wxml

<view class="tab-control">     <block wx:for="{{titles}}" wx:key="{{index}}">         <view class='tab-item {{currentIndex == index ?"active":" "}}' bindtap="itemClick" data-index="{{index}}">             <text>{{item}}</text>         </view>     </block> </view>

子层wxss

.tab-control {
    display: flex;
    height: 88rpx;
    line-height: 88rpx;
    background: #fff;
    padding-bottom: 10rpx;
    /* background: orange; */
}

.tab-item {
    flex: 1;
    text-align: center;
}

.active {
    color:#1296db;
}
.active text{
    padding: 10rpx 10rpx;
    border-bottom: 6rpx solid #1296db;
}

子层js

Component({
    /**     * 组件的属性列表     */
    properties: {
        titles: {
            type: Array,
            value: []
        }
    },
    /**     * 组件的初始数据     */
    data: {
        currentIndex: 0
    },

    /**     * 组件的方法列表     */
    methods: {
        itemClick(event) {
            //  获取传入的index
            const index = event.currentTarget.dataset.index;
            // console.log("--------", index)
            //改变原有记录的currentIndex
            this.setData({
                currentIndex: index
            })
            //发出时间
            const data = {
                index: this.data.currentIndex
            }
            //发出自定义事件
            this.triggerEvent('tabclick', data, {})
        }
    }
})

图片效果

温馨提示：这篇文章没有解决您的问题？欢迎添加微信：18948083295，有微信小程序专业人员，保证有问必答。转载本站文章请注明转自http://www.okeydown.com/（微信小程序网）。

• 微信扫描二维码关注官方微信
• ▲长按图片识别二维码