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})} })

總結

以上是生活随笔為你收集整理的小程序 --- Tab组件的封装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。