1. Tabs組件的封裝

---

1.1 組件的引入

使用自定義的組件很簡單,只需在使用組件的頁面的配置文件.json文件中配置.

// pages/goods_list/index.json
{"usingComponents":{"Tabs": "../../components/Tabs/Tabs"}
}

然后再.wxml文件中使用即可

<!-- pages/goods_list/index.wxml -->
<Tabs></Tabs>

1.2 向組件傳遞參數(父->子)

在父頁面中首先有如下數據

// pages/goods_list/index.js
page({data:{tabs: [...]}
})

然后在使用組件的時候將參數帶上

<!-- pages/goods_list/index.wxml -->
<Tabs tabs="{{tabs}}"></Tabs>

在組件中接收參數

// components/Tabs/Tab.js
Component({properties:{tabs:{type: Array,value: []}}
})

之后就可以使用參數了. 下面是使用參數的寫的一個小栗子:

<view class="tabs"><view class="tabs_title"><view wx:for="{{tabs}}" wx:key="id" class="title_item"></view></view>
</view>

1.3 給組件綁定點擊事件

關鍵在于bindtap

<!-- components/Tabs/Tabs.wxml -->
<view bindtap="handleItemTap" data-hello="world">
</view>

上述將傳遞的參數寫在了data-hello中,然后js中寫事件處理函數

// components/Tabs/Tab.js
Components({methods: {handleItemTap(e) {// 接收data-hello屬性的值const { hello } = e.target.dataset;}}
})

1.4 向父級傳遞值(子->父)

在子組件的事件處理函數中調用微信提供的triggerEvent

// components/Tabs/Tabs.js
Component({methods:{handleItemTap(e) {const { hello } = e.target.dataset;this.triggerEvent("TabsItemChange", { hello })}}
})

以上實現了: 當點擊子組件的view標簽時,會像父組件傳遞一個 { hello: world}的字符串.下面在父組件調用Tabs組件的位寫上一個接收該方法的函數

<!-- pages/goods_list/index.wxml -->
<Tabs tabs="{{tabs}}" bindTabsItemChange ="handleTabsItemChange"></Tabs>

以上在父組件中添加了一個事件處理函數的索引信息,下面在父組件的js文件中實現事件處理函數

// pages/goods_list/index.js
Page({handleTabsItemChange(e) {const {hello} = e.detailconsole.log(hello);}
})

1.5 插槽的實現

Tab欄的最基本功能是,根據點擊的小tips,底下的內容跟著改變.這在設計Tabs組件的時候就該考慮到

<!-- components/Tabs/Tabs.wxml -->
<view class="tabs"><view class="tabs_title"><view wx:for="{{tabs}}" wx:key="id">{{item.value}}</view></view><view class=”tabs_content><!-- 注意此處實現插槽 --><slot></slot></view>
</view>

在使用的時候,只需使用block標簽替換插槽中的內容即可

<!-- pages/goods_list/index.wxml -->
<Tabs tabs="{{tabs}}"><block wx:if="{{tabs[0].isActive}}">綜合</block><block wx:elif="{{tabs[1].isActive}}">銷量</block><block wx:elif="{{tabs[2].isActive}}">價格</block>
</Tabs>

1.6 總體代碼

包括組件的實現和調用

【組件的wxml】

<!--components/Tabs/Tabs.wxml-->
<view class="tabs"><view class="tabs_title"><view wx:for="{{tabs}}" wx:key="id" class="title_item {{item.isActive? 'active': ''}}"bindtap="handleItemTap"data-index="{{index}}">{{item.value}}</view></view><view class="tabs_content"><slot></slot></view>
</view>

【組件的js】

// components/Tabs/Tabs.js
Component({/*** 組件的屬性列表*/properties: {tabs: {type: Array,value: [],},},/*** 組件的初始數據*/data: {},/*** 組件的方法列表*/methods: {handleItemTap(e) {// 1. 獲取點擊的索引const { index } = e.target.dataset// 2. 觸發父組件中的事件this.triggerEvent("TabsItemChange", {index})},},
})

【組件的樣式】

/* components/Tabs/Tabs.wxss */
.tabs {}.tabs_title {display: flex;
}.title_item {flex:1;display: flex;justify-content: center;align-items: center;padding: 15rpx 0;
}.active{color: var(--themeColor);border-bottom: 5rpx solid currentColor;
}

【調用的wxml】

<!--pages/goods_list/index.wxml-->
<Tabs tabs="{{tabs}}" bindTabsItemChange="handleTabsItemChange"><block wx:if="{{tabs[0].isActive}}">綜合</block><block wx:elif="{{tabs[1].isActive}}">銷量</block><block wx:elif="{{tabs[2].isActive}}">價格</block>
</Tabs>

【調用的js】

// pages/goods_list/index.js
Page({/*** 頁面的初始數據*/data: {tabs: [{id: 0,value: '綜合',isActive: true,},{id: 1,value: '銷量',isActive: false,},{id: 2,value: '價格',isActive: false,},],},/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {console.log(options)},// 標題的點擊事件(從子組件傳遞過來)handleTabsItemChange(e) {const { index } = e.detaillet { tabs } = this.datatabs.forEach((v, i) => (i == index ? (v.isActive = true) : (v.isActive = false)))this.setData({tabs})}
})