tabbar

custom-tab-bar/index.js

@@ -0,0 +1,85 @@
+const _Http = getApp().globalData.http;
+Component({
+    lifetimes: {
+        ready: function () {
+            if (this.data.count == 1) return;
+            if (wx.getStorageSync('userauth') != 0) {
+                //判断页面 以免一直触发
+                const pages = getCurrentPages(),
+                    prevPage = pages[pages.length - 1];
+                if (prevPage.route == 'pages/login/selectSite' || prevPage.route.includes('pages/tabbar/')) this.setData({
+                    Permission: ['首页', '信息', '我的']
+                })
+            }
+        },
+    },
+    data: {
+        active: 'home',
+        Permission: ['首页', '信息', '我的'], //可看模块
+        tabbarList: [{
+                icon: 'icon-a-biaoqianlanshouyexuanzhong',
+                acicon: 'icon-a-biaoqianlanshouyexuanzhong',
+                text: '首页',
+                url: '/pages/tabbar/home/index',
+                name: 'home'
+            },
+            {
+                icon: 'icon-a-biaoqianlanxiaoxi',
+                acicon: 'icon-a-biaoqianlanxiaoxixuanzhong',
+                text: '信息',
+                url: '/pages/tabbar/message/index',
+                name: 'message'
+            },
+            {
+                icon: 'icon-a-biaoqianlanwode',
+                acicon: 'icon-a-biaoqianlanwodexuanzhong',
+                text: '我的',
+                url: '/pages/tabbar/mine/index',
+                name: 'mine'
+            }
+        ],
+    },
+    methods: {
+        onChange(event) {
+            let active = event.detail,
+                obj = this.data.tabbarList.find(v => v.name == active);
+            wx.switchTab({
+                url: obj.url
+            });
+            this.setData({
+                active
+            });
+        },
+        init() {
+            const page = getCurrentPages().pop();
+            let obj = this.data.tabbarList.find(item => item.url === `/${page.route}`);
+            this.setData({
+                active: obj.name
+            });
+            //socket
+            if (!getApp().globalData.socketEstablish) getApp().initSocket();
+            getApp().globalData.socket = {
+                that: this,
+                callback: this.unReadMessageCount
+            }
+            this.unReadMessageCount()
+        },
+        /* 更新信息数量 */
+        unReadMessageCount() {
+            _Http.basic({
+                "classname": "system.message.Message",
+                "method": "unReadMessageCount",
+                "content": {
+                    nocache: true
+                }
+            }, false).then(res => {
+                if (res.msg != '成功') return;
+                let fcount = res.data.fcount > 99 ? '99+' : res.data.fcount;
+                if (res.data.fcount == 0) fcount = "";
+                getApp().globalData.socket.that.setData({
+                    'tabbarList[1].fcount': fcount
+                })
+            })
+        }
+    },
+})

custom-tab-bar/index.json

@@ -0,0 +1,6 @@
+{
+    "usingComponents": {
+        "van-tabbar": "@vant/weapp/tabbar/index",
+        "van-tabbar-item": "@vant/weapp/tabbar-item/index"
+    }
+}

custom-tab-bar/index.scss

@@ -0,0 +1 @@
+@import '../static/font-icon.wxss';

custom-tab-bar/index.wxml

@@ -0,0 +1,7 @@
+<van-tabbar active="{{ active }}" placeholder active-color='#3874F6' bindchange="onChange">
+    <van-tabbar-item  info="{{item.fcount}}" name="{{item.name}}" wx:for="{{tabbarList}}" wx:key="index">
+        <text slot='icon' class="{{'iconfont '+item.icon}}" style="font-size: 44rpx; color: #999999;" />
+        <text slot='icon-active' class="{{'iconfont '+item.acicon}}" style="font-size: 44rpx; color: #3874F6;" />
+        {{item.text}}
+    </van-tabbar-item>
+</van-tabbar>