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

時間 2019-11-10

標籤 wepy 程序自定義底部 tabbar 简体版

原文原文鏈接

PS後續:css

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

　　由於有好幾位道友都問了這個問題, 其中一位由於項目很急,因此就研究了一下(也是借鑑大佬的想法), 差很少解決了閃屏的問題.但仍是有點小瑕疵.json

　　解決自定義tabbar閃屏的問題, 參考連接: https://developers.weixin.qq.com/community/develop/doc/000c6e038c0ce05413f71e7ce56c04小程序

　　本人也是前端路上的小白(工做滿打滿算才一年半...), 因此寫的有什麼不對的地方, 還望指出吶.數組

　　解決閃屏的代碼就直接放壓縮包連接了, 須要的話能夠下載去借鑑 : https://files.cnblogs.com/files/yk95/wepy-poster-test.zip
app

　　　　運行項目以前, 仍是去看一下大佬的文章, 這樣思路更清晰.post

　　　　運行項目, 須要對wepy有所瞭解, 不瞭解的能夠去查看官方文檔, 測試

　　　　還有小程序項目的appId須要弄成測試號, 否則這是個人(由於懶,就沒刪appId),無法跑.this

　　　　還有, 項目的初始頁面得是自定義tabbar頁面的其中一個, 也就是在app.json中config下的pages, 否則的話會出問題(不然只能在每一個頁面去隱藏官方tabbar了) -- 先看參考連接, 先看參考連接, 先看參考連接,阿里雲

對於下面的文章, 由於寫的很差, 而且問題也多, 因此不建議去看了. 能夠直接下載代碼壓縮包,畢竟在編譯器上看代碼仍是最爽的.

由於需求,小程序自帶的tabBar不能知足, 因此只能來本身從新寫一個. 先看效果圖吧

　首頁:

發現:

消息:

個人:

接下來看代碼:

1- 組件-- tabBarBottom.wpy 這裏頁面也能夠用循環來寫, 不過就要在樣式上再去調整, 我這裏沒有用循環, 就將就看吧.....

　　view 中的 c-y 與 c-gray 是公共樣式中, 控制圖標顏色的切換; 由於這裏的圖標我用的是阿里雲圖標, 不是圖片, 能夠本身替換成圖片, 根據 selected 進行圖片切換

<template>
    <view class="tabBarBox">
        <!-- 首頁 -->
        <navigator class="itemView" url="{{tabBar.list[0].pagePath}}" open-type="redirect" hover-class="none">
            <view class="item_icon {{tabBar.list[0].selected ? 'c-y' : 'c-gray'}} {{tabBar.list[0].icon_class}}"></view>
　　　　　　　　//若是替換成圖片 寫法  替換圖片注意樣式, 樣式應該要進行調整
　　　　　　　 //<image class="" src="{{tabBar.list[0].selected ? 'tabBar.list[0].img_act' : 'tabBar.list[0].img'}}">
            <view class="item_text {{tabBar.list[0].selected ? 'c-y' : 'c-gray'}}">{{tabBar.list[0].text}}</view>
        </navigator>
        <!-- 發現 -->
        <navigator class="itemView" url="{{tabBar.list[1].pagePath}}" open-type="redirect" hover-class="none">
            <view class="item_icon {{tabBar.list[1].selected ? 'c-y' : 'c-gray'}} {{tabBar.list[1].icon_class}}"></view>
            <view class="item_text {{tabBar.list[1].selected ? 'c-y' : 'c-gray'}}">{{tabBar.list[1].text}}</view>
        </navigator>
        <!-- 發佈 -->
        <view class="addView">
            <image class="add_icon" src="../images/add.png"></image>
        </view>
        <!-- 消息 -->
        <navigator class="itemView2 itemView" url="{{tabBar.list[2].pagePath}}" open-type="redirect" hover-class="none">
            <view class="item_icon {{tabBar.list[2].selected ? 'c-y' : 'c-gray'}} {{tabBar.list[2].icon_class}}"></view>
            <view class="item_text {{tabBar.list[2].selected ? 'c-y' : 'c-gray'}}">{{tabBar.list[2].text}}</view>
        </navigator>
        <!-- 個人 -->
        <navigator class="itemView" url="{{tabBar.list[3].pagePath}}" open-type="redirect" hover-class="none">
            <view class="item_icon {{tabBar.list[3].selected ? 'c-y' : 'c-gray'}} {{tabBar.list[3].icon_class}}"></view>
            <view class="item_text {{tabBar.list[3].selected ? 'c-y' : 'c-gray'}}">{{tabBar.list[3].text}}</view>
        </navigator>
        <!-- <view></view> -->
    </view>
</template>
<script>
import wepy from 'wepy';
export default class tabBar extends wepy.component {
    //    props 接收父組件傳遞過來的值
    props = {　　
　　　　// 接收父級傳遞的tabBar信息
       tabBar: {
           type: Object,
           default: {}
       }
    }

    components = {
        
    }

    data = {
        
    }

    onLoad() {
       
    }

    computed = {}
    methods = {
       
    }
    event = {}
}
</script>
<style lang="scss">
    .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;
        }
    }
</style>

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 <template>
 2     <view id="HomePage">
 3         <view>
　　　　　　　　　　// ⑤: 使用組件, 將數據傳遞給組件
 4             <tabBarBottom :tabBar.sync="tabBarData"></tabBarBottom>
 5         </view>
 6     </view>
 7 </template>
 8 <script>
 9 import wepy from 'wepy';
10 import tabBarBottom from '@/components/tabBarBottom';  //①:先導入組價 
11 export default class 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 </script>