微信小程序实用小组件：自定义tabbar

微信小程序 自定义tabbar

创建wxml模板

<template name="tabbar">    <view class="tabbar_box" style="background-color:{{tabbar.backgroundColor}}; border-top-color:{{tabbar.borderStyle}}; {{tabbar.position == 'top' ? 'top:0' : 'bottom:0'}}">        <block wx:for="{{tabbar.list}}" wx:for-item="item" wx:key="index">            <navigator class="tabbar_nav" url="{{item.pagePath}}" style="width:{{1/tabbar.list.length*100}}%; color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="redirect">                <image class="tabbar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image>                <text>{{item.text}}</text>            </navigator>        </block>    </view></template>

wxss布局

.tabbar_box{    display: flex;    flex-direction: row;    justify-content: space-around;    position: fixed;    bottom: 0;    left: 0;    z-index: 999;    width: 100%;    height: 120rpx;    border-top: 1rpx solid gray; }.tabbar_nav{    display: flex;    flex-direction: column;    justify-content: center;    align-items: center;    font-size: 28rpx;    height: 100%;}.tabbar_icon{    width: 61rpx;    height: 61rpx;}

布局不是重点也可以自定义布局也可以引用我写好的样式

重点来了 tabbar的参数配置

tabbar:{      color: "#000000",      selectedColor: "#0f87ff",      backgroundColor: "#ffffff",      borderStyle: "black",      list: [        {          pagePath: "/pages/tabbar/tabbar",          text: "项目",          iconPath: "/images/item.png",          selectedIconPath: "/images/item_HL.png",          selected: true        },        {          pagePath: "/pages/address/address",          text: "通讯录",          iconPath: "/images/ts.png",          selectedIconPath: "/images/ts1.png",          selected: false        },        {          pagePath: "/pages/personal/personal",          text: "文件",          iconPath: "/images/wjj.png",          selectedIconPath: "/images/wjj1.png",          selected: false        }      ],      position: "bottom"    }

有没有感觉很熟悉，没错就是你熟悉的tababar配置，仅仅增加了一个selected参数来表示选中的状态另外一点要注意的是我们的tabbar数据配置在app.js里面而不是app.json里面

最后还有一个比较重要的点 在app.js里面的一个函数

editTabBar: function(){    var tabbar = this.globalData.tabbar,        currentPages = getCurrentPages(),        _this = currentPages[currentPages.length - 1],        pagePath = _this.__route__;    (pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);    for(var i in tabbar.list){      tabbar.list[i].selected = false;      (tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);    }    _this.setData({      tabbar: tabbar    });  },

我们完整的app.js是这样的

//app.jsApp({  onLaunch: function () {    //调用API从本地缓存中获取数据    var logs = wx.getStorageSync('logs') || []    logs.unshift(Date.now())    wx.setStorageSync('logs', logs)  },  getUserInfo:function(cb){    var that = this    if(this.globalData.userInfo){      typeof cb == "function" && cb(this.globalData.userInfo)    }else{      //调用登录接口      wx.login({        success: function () {          wx.getUserInfo({            success: function (res) {              that.globalData.userInfo = res.userInfo              typeof cb == "function" && cb(that.globalData.userInfo)            }          })        }      })    }  },  editTabBar: function(){    var tabbar = this.globalData.tabbar,        currentPages = getCurrentPages(),        _this = currentPages[currentPages.length - 1],        pagePath = _this.__route__;    (pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);    for(var i in tabbar.list){      tabbar.list[i].selected = false;      (tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);    }    _this.setData({      tabbar: tabbar    });  },  globalData:{    userInfo:null,    tabbar:{      color: "#000000",      selectedColor: "#0f87ff",      backgroundColor: "#ffffff",      borderStyle: "black",      list: [        {          pagePath: "/pages/tabbar/tabbar",          text: "项目",          iconPath: "/images/item.png",          selectedIconPath: "/images/item_HL.png",          selected: true        },        {          pagePath: "/pages/address/address",          text: "通讯录",          iconPath: "/images/ts.png",          selectedIconPath: "/images/ts1.png",          selected: false        },        {          pagePath: "/pages/personal/personal",          text: "文件",          iconPath: "/images/wjj.png",          selectedIconPath: "/images/wjj1.png",          selected: false        }      ],      position: "bottom"    }  }})

生成的东西我没有删掉

到这准备工作已经完成  下面就是怎么使用

在wxml引入创建的模板并使用

<import src="../tabbar/tabbar.wxml"/><template is="tabbar" data="{{tabbar}}"/>

我这里是相对路径，最好写成绝对路径

wxss中引入样式

@import "/pages/tabbar/tabbar.wxss"

js中调用函数

//获取app实例var app = getApp();Page({  data:{    tabbar:{}  },  onLoad:function(options){    // 页面初始化 options为页面跳转所带来的参数    //调用函数    app.editTabBar();   },  onReady:function(){    // 页面渲染完成  },  onShow:function(){    // 页面显示  },  onHide:function(){    // 页面隐藏  },  onUnload:function(){    // 页面关闭  }})

注意在每个配置在tabbar中的页面都要有这三步，因为这个是页面跳转了还有一个问题就是页面跳转的时候会闪一下，网络慢的时候更明显后面我会做一个不是跳转页面的tabbar

项目地址：https://github.com/songzeng2016/wechat-app-tabbar（欢迎点star）