wepy公共樣式_Wepy-- 小程式自定義底部 tabBar

Wepy-- 小程式自定義底部 tabBar

因為需求, 小程式自帶的 tabBar 不能滿足, 是以隻能來自己重新寫一個. 先看效果圖吧

首頁:

發現:

消息:

我的:

接下來看代碼:

1- 元件 -- tabBarBottom.wpy 這裡頁面也可以用循環來寫, 不過就要在樣式上再去調整, 我這裡沒有用循環, 就将就看吧.....

view 中的 c-y 與 c-gray 是公共樣式中, 控制圖示顔色的切換; 因為這裡的圖示我用的是阿裡雲圖示, 不是圖檔, 可以自己替換成圖檔, 根據 selected 進行圖檔切換

// 如果替換成圖檔 寫法 替換圖檔注意樣式, 樣式應該要進行調整

//

{{tabBar.list[0].text}}

{{tabBar.list[1].text}}

{{tabBar.list[2].text}}

{{tabBar.list[3].text}}

importwepy from'wepy';

exportdefaultclasstabBar extends wepy.component{

// props 接收父元件傳遞過來的值

props={

// 接收父級傳遞的 tabBar 資訊

tabBar:{

type:Object,

default:{}

}

}

components={

}

data={

}

onLoad(){

}

computed={}

methods={

}

event={}

}

.tabBarBox{

width:100%;

height:100rpx;

background-color:#fff;

position:fixed;

bottom:0;

z-index:9999;

border-top:1px#afafaf solid;

}

.itemView2{

margin-left:150rpx;

}

.itemView{

width:150rpx;

height:100rpx;

text-align:center;

display:inline-block;

padding-top:6rpx;

.item_icon{

font-size:50rpx;

}

.item_text{

font-size:28rpx;

}

}

.addView{

width:150rpx;

position:fixed;

bottom:0;

text-align:center;

display:inline-block;

.add_icon{

width:120rpx;

height:120rpx;

}

}

2- tabBar 的資料 , 我放在了啟動檔案中 app.wpyglobalData={

userInfo:null,

// tabBar 資料

tabBar:{

list:[

{

pagePath:"home",

text:"首頁",

icon_class:"iconfont icon-tab-home",// 這裡用的是阿裡圖示, 可以替換成圖檔

selected:true

// 圖檔寫法

// img: '未選中的圖檔路徑',

// img_act: '被選中的圖檔路徑'

},

{

pagePath:"find",

text:"發現",

icon_class:"iconfont icon-tab-find",

selected:false

},

{

pagePath:"news",

text:"消息",

icon_class:"iconfont icon-tab-news",

selected:false

},

{

pagePath:"myInfo",

text:"我的",

icon_class:"iconfont icon-tab-my",

selected:false

}

]

}

}

// 處理 tabBar 中點選, 被點選, 将目前的資料對象中 selected 改成 true, 其餘的就得改成 false; 這裡的 id 是辨別, 在調用時手動傳入的; id 與 tabBar 數組每一個對象索引要對應

tabBarClickHandle(id,that){

lettbList=this.globalData.tabBar.list;

tbList.forEach((item,index)=>{

if(id==index){

tbList[id].selected=true;

}else{

tbList[index].selected=false;

}

});

that.$apply();

returnthis.globalData.tabBar;

}

3- 首頁中使用元件 剩餘的 發現, 消息, 我的這三個頁面中都是這樣的用法, 都是這五步, 不過剩餘的三個 在第四步中 id 要變發現 --id-1 消息 --id-2 我的 --id-3

// : 使用元件, 将資料傳遞給元件

importwepyfrom'wepy';

importtabBarBottomfrom'@/components/tabBarBottom';//: 先導入組價

exportdefaultclassHomeextendswepy.page{

config={

navigationBarTitleText:"首頁"

}

components={

tabBarBottom,// 聲明元件

}

data={

tabBarData:{},// 元件資料 < 傳遞給元件的 >

}

onLoad(){

//: 擷取資料, 更新資料 tabBarClickHandle() 啟動檔案中編寫的 ---- 0 就是形參 id 的實參

this.tabBarData=this.$parent.tabBarClickHandle(0,this);

this.$apply();

}

computed={

}

methods={

}

event={

}

}

慢慢積累, 慢慢成長, 加油!!

文章中如果有錯誤, 請您指出, 我會第一時間去修改;

:

來源: https://www.cnblogs.com/yk95/p/9597493.html