小程序實現(xiàn)頁面給自定義組件賦值

更新時間：2022年05月23日 09:05:40 作者：gyuei

這篇文章主要為大家詳細介紹了小程序實現(xiàn)頁面給自定義組件賦值，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了小程序之頁面給自定義組件賦值的具體代碼，供大家參考，具體內容如下

1.新建組件：在component下新建一個tabBar

2.組件中的index.wxml結構如下：

<cover-view class="tab-bar">
?? ?<cover-view class="tab-bar-border"></cover-view>
?? ?<cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="tabChange">
?? ??? ?<cover-image src="{{tabbarIndex === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
?? ??? ?<cover-view style="color: {{tabbarIndex === index ? selectedColor : color}}">{{item.text}}</cover-view>
?? ?</cover-view>
</cover-view>

3.組件中的index.js結構如下：

Component({
? /**
?1. 組件的屬性列表
? ?*/
? options: {
? ? multipleSlots: true //在組件定義時的選項中啟用多slot支持
? },
? properties: {
? ? list: {// 屬性名
? ? ? type: Array,
? ? ? value: []
? ? },
? ? selectedColor:{// 屬性名
? ? ? type: String,
? ? ? value:''
? ? },
? ? color:{// 屬性名
? ? ? type: String,
? ? ? value:''
? ? },
? },

? /**
?2. 組件的初始數(shù)據(jù)
? ?*/
? data: {
? ? tabbarIndex: 0//默認顯示第一個tab元素
? },

? lifetimes: {
? ? attached() {}
? },

? /**
?3. 組件的方法列表
? ?*/
? methods: {
? ? //組件的點擊事件
? ? tabChange(e) {
? ? ? //獲取到底部欄元素的下標
? ? ? let index = e.currentTarget.dataset.index;
? ? ? this.setData({
? ? ? ? tabbarIndex:index,
? ? ? })
? }
})

4.組件中的index.json結構如下：

{
? "component": true,
? "usingComponents": {}
}

5.組件的引用：在頁面pages/index/index.json中加入

{
? "navigationBarTitleText": "測試",
? "usingComponents": {
? ? "mp-tabbar": "../components/tabBar/index"
? }
}

6.在頁面pages/index/index.wxml中加入

<view wx:if="{{tabbarIndex == 0}}">111111</view>
<view wx:if="{{tabbarIndex == 1}}">222222</view>
<view wx:if="{{tabbarIndex == 2}}">333333</view>
<mp-tabbar list="{{list}}" id='tabComponent' bind:onMyEvent="switchTab"></mp-tabbar>

7.在頁面pages/index/index.js中加入

data: {
? ? tabbarIndex:0,//默認顯示市場
? ? color: "#555555",
? ? selectedColor: "#2ea7e0",
? ? //底部欄
? ? items: [{
? ? ? ? "text": "市場",
? ? ? ? "iconPath": "/images/bazaar.png",
? ? ? ? "selectedIconPath": "/images/tselected.png",
? ? ? },
? ? ? {
? ? ? ? "text": "充值",
? ? ? ? "iconPath": "/images/recharge.png",
? ? ? ? "selectedIconPath": "/images/recharge_selected.png",
? ? ? }, {
? ? ? ? "text": "車隊",
? ? ? ? "iconPath": "/images/market.png",
? ? ? ? "selectedIconPath": "/images/market_selected.png",
? ? ? }
? ? ]
? },
? onShow: function () {
? ? this.tabComponent = this.selectComponent('#tabComponent');
? ? let selectedColor = this.data.selectedColor;
? ? let color = this.data.color;
? ? this.tabComponent.setData({
? ? ? selectedColor: selectedColor,
? ? ? color:color
? ?})
? ?console.log(this.tabComponent.data.tabbarIndex)
? },