小程序-目錄欄組件

原理

• 子層向父層傳遞數據和綁定點擊按鈕顯示不一樣的數據
  • （若需瞭解子層向父層傳遞數據轉這裏小程序-自定義組件數據傳遞）
• 這裏核心是點擊顯示數據咱們採用了子層向父層：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, {})
        }
    }
})

圖片效果