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

PS後續:

說來慚愧, 沒想到這篇文章浏覽的人有點多. 說實話寫的挺亂的. 并且自定義tabbar還有閃屏的問題.

因為有好幾位道友都問了這個問題,  其中一位因為項目很急,是以就研究了一下(也是借鑒大佬的想法),  差不多解決了閃屏的問題.但還是有點小瑕疵.

本人也是前端路上的小白(工作滿打滿算才 一年半...), 是以寫的有什麼不對的地方, 還望指出呐.

運作項目之前, 還是去看一下大佬的文章, 這樣思路更清晰.

運作項目, 需要對wepy有所了解, 不了解的可以去檢視官方文檔,

還有小程式項目的appId需要弄成測試号, 不然這是我的(因為懶,就沒删appId),沒法跑.

還有, 項目的初始頁面得是自定義tabbar頁面的其中一個, 也就是在app.json中config下的pages,  不然的話會出問題(否則隻能在每個頁面去隐藏官方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}}

exportdefaultclass tabBar extends wepy.component {//props 接收父元件傳遞過來的值

props ={

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

tabBar: {

type: Object,default: {}

}

}

components={

}

data={

}

onLoad() {

}

computed={}

methods={

}

event={}

}

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.wpy

1 globalData ={2 userInfo: null,

// tabBar資料3 tabBar:{4 list: [5 {6 pagePath: "home",7 text: "首頁",8 icon_class: "iconfont icon-tab-home", //這裡用的是阿裡圖示, 可以替換成圖檔9 selected: true

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

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

10 },11 {12 pagePath: "find",13 text: "發現",14 icon_class: "iconfont icon-tab-find",15 selected: false

16 },17 {18 pagePath: "news",19 text: "消息",20 icon_class: "iconfont icon-tab-news",21 selected: false

22 },23 {24 pagePath: "myInfo",25 text: "我的",26 icon_class: "iconfont icon-tab-my",27 selected: false

28 }29 ]30 }31 }

// 處理tabBar中點選, 被點選,将目前的資料對象中 selected 改成true, 其餘的就得改成 false; 這裡的id是辨別, 在調用時手動傳入的; id 與 tabBar數組每一個對象索引要對應32 tabBarClickHandle(id, that) {33 let tbList = this.globalData.tabBar.list;34 tbList.forEach((item, index) =>{35 if (id ==index) {36 tbList[id].selected = true;37 } else{38 tbList[index].selected = false;39 }40 });41 that.$apply();42 return this.globalData.tabBar;43 }

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

1

2

3

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

4

5

6

7

8

9 import wepy from 'wepy';10 import tabBarBottom from '@/components/tabBarBottom'; //①:先導入組價11 export defaultclass Home extends wepy.page{12 config ={13 navigationBarTitleText: "首頁14 }15 components = {16 tabBarBottom, // ② 聲明元件17 }18 data = {19 tabBarData: {}, //③ 元件資料 20 }21 onLoad() {

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

22 this.tabBarData = this.$parent.tabBarClickHandle(0, this);23 this.$apply();24 }25 computed = {26

27 }28 methods = {29

30 }31 event = {32

33 }34 }35

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

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

①: