小程序?qū)崿F(xiàn)頁(yè)面給自定義組件賦值
更新時(shí)間：2022年05月23日 09:05:40 作者：gyuei
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)頁(yè)面給自定義組件賦值，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了小程序之頁(yè)面給自定義組件賦值的具體代碼，供大家參考，具體內(nèi)容如下
1.新建組件：在component下新建一個(gè)tabBar
2.組件中的index.wxml結(jié)構(gòu)如下：
<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結(jié)構(gòu)如下：
Component({
? /**
?1. 組件的屬性列表
? ?*/
? options: {
? ? multipleSlots: true //在組件定義時(shí)的選項(xiàng)中啟用多slot支持
? },
? properties: {
? ? list: {// 屬性名
? ? ? type: Array,
? ? ? value: []
? ? },
? ? selectedColor:{// 屬性名
? ? ? type: String,
? ? ? value:''
? ? },
? ? color:{// 屬性名
? ? ? type: String,
? ? ? value:''
? ? },
? },
? /**
?2. 組件的初始數(shù)據(jù)
? ?*/
? data: {
? ? tabbarIndex: 0//默認(rèn)顯示第一個(gè)tab元素
? },
? lifetimes: {
? ? attached() {}
? },
? /**
?3. 組件的方法列表
? ?*/
? methods: {
? ? //組件的點(diǎn)擊事件
? ? tabChange(e) {
? ? ? //獲取到底部欄元素的下標(biāo)
? ? ? let index = e.currentTarget.dataset.index;
? ? ? this.setData({
? ? ? ? tabbarIndex:index,
? ? ? })
? }
})4.組件中的index.json結(jié)構(gòu)如下：
{
? "component": true,
? "usingComponents": {}
}5.組件的引用：在頁(yè)面pages/index/index.json中加入
{
? "navigationBarTitleText": "測(cè)試",
? "usingComponents": {
? ? "mp-tabbar": "../components/tabBar/index"
? }
}6.在頁(yè)面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.在頁(yè)面pages/index/index.js中加入
data: {
? ? tabbarIndex:0,//默認(rèn)顯示市場(chǎng)
? ? color: "#555555",
? ? selectedColor: "#2ea7e0",
? ? //底部欄
? ? items: [{
? ? ? ? "text": "市場(chǎng)",
? ? ? ? "iconPath": "/images/bazaar.png",
? ? ? ? "selectedIconPath": "/images/tselected.png",
? ? ? },
? ? ? {
? ? ? ? "text": "充值",
? ? ? ? "iconPath": "/images/recharge.png",
? ? ? ? "selectedIconPath": "/images/recharge_selected.png",
? ? ? }, {
? ? ? ? "text": "車(chē)隊(duì)",
? ? ? ? "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)
? },
8.最終效果如圖：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)跳一跳小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
js獲取json中key所對(duì)應(yīng)的value值的簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇js獲取json中key所對(duì)應(yīng)的value值的簡(jiǎn)單方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
使用uniapp打包微信小程序時(shí)主包和vendor.js過(guò)大解決(uniCloud的插件分包)
每個(gè)使用分包小程序必定含有一個(gè)主包,所謂的主包,即放置默認(rèn)啟動(dòng)頁(yè)面/TabBar頁(yè)面,以及一些所有分包都需用到公共資源/JS 腳本,下面這篇文章主要給大家介紹了關(guān)于使用uniapp打包微信小程序時(shí)主包和vendor.js過(guò)大解決的相關(guān)資料,,需要的朋友可以參考下2023-02-02
checkbox全選所涉及到的知識(shí)點(diǎn)介紹
checkbox全選涉及到的知識(shí)點(diǎn)比如IE里起作用，火狐不起作用，getElementById()與getElementsByName()的區(qū)別等等2013-12-12
javascript代碼簡(jiǎn)寫(xiě)的幾種常用方式匯總
任何一種編程語(yǔ)言的簡(jiǎn)寫(xiě)小技巧都是為了幫助你寫(xiě)出更簡(jiǎn)潔、更完善的代碼,讓你用更少的編碼實(shí)現(xiàn)你的需求,這篇文章主要給大家介紹了關(guān)于javascript代碼簡(jiǎn)寫(xiě)的幾種常用方式,需要的朋友可以參考下2021-08-08
JavaScript新功能介紹之findLast()和findLastIndex()
最近工作中遇到了一個(gè)關(guān)于查找數(shù)組里面的目標(biāo)元素的方法,所以下面這篇文章主要給大家介紹了關(guān)于JavaScript新功能之findLast()?和findLastIndex()的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
這篇文章主要為大家詳細(xì)介紹了javascript原型繼承，闡明什么是原型繼承,以及在JavaScript中究竟如何使用原型繼承,感興趣的小伙伴們可以參考一下2016-04-04
JavaScript數(shù)組Array的一些常用方法總結(jié)
JavaScript的Array對(duì)象是用于構(gòu)造數(shù)組的全局對(duì)象,數(shù)組是類(lèi)似于列表的高階對(duì)象,下面這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組Array的一些常用方法,需要的朋友可以參考下2021-11-11
js 事件對(duì)象 鼠標(biāo)滾輪效果演示說(shuō)明
第三篇，繼續(xù)總結(jié)事件對(duì)象 先看看監(jiān)聽(tīng)鼠標(biāo)滾輪事件能幫我們做什么2010-05-05
這篇文章主要介紹了一文理解JavaScript裝飾器模式，文章基于JavaScript的相關(guān)資料展開(kāi)詳細(xì)介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-04-04