首页 > 课堂 > 小程序 > 正文

微信小程序tabbar底部导航

2020-03-21 16:07:37
字体:
来源:转载
供稿:网友

微信小程序重写tabbar底部导航,供大家参考,具体内容如下

1.app.js代码如下:

 editTabBar: function() {    var e = this.globalData.tabbar, a = getCurrentPages(), t = a[a.length - 1], s = t.__route__;    0 != s.indexOf("/") && (s = "/" + s);    for (var n in e.list) e.list[n].selected = !1, e.list[n].pagePath == s && (e.list[n].selected = !0);    t.setData({      tabbar: e    });  },  tabBar: {    color: "#123",    selectedColor: "#1ba9ba",    borderStyle: "#1ba9ba",    backgroundColor: "#fff",    list: [ {      pagePath: "/we7/pages/index/index",      iconPath: "/we7/resource/icon/home.png",      selectedIconPath: "/we7/resource/icon/homeselect.png",      text: "首页"    }, {      pagePath: "/we7/pages/user/index/index",      iconPath: "/we7/resource/icon/user.png",      selectedIconPath: "/we7/resource/icon/userselect.png",      text: "我的"    } ]  },  globalData: {    userInfo: null,    tabbar: {      color: "#333",      selectedColor: "#d0501f",      backgroundColor: "#ffffff",      borderStyle: "#d5d5d5",      list: [ {        pagePath: "/pages/seller/gzt",        text: "工作台",        iconPath: "/pages/images/gzt@3x.png",        selectedIconPath: "/pages/images/gztxz@3x.png",        selected: !0      }, {        pagePath: "/pages/seller/cp/cplb",        text: "商品",        iconPath: "/pages/images/dbdc.png",        selectedIconPath: "/pages/images/dbdcxz.png",        selected: !1      },       position: "bottom"    }  },

template.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'}}">    <navigator class="tabbar_nav" openType="redirect" style="width:{{1/tabbar.list.length*100}}%; color:{{item.selected?tabbar.selectedColor:tabbar.color}}" url="{{item.pagePath}}" wx:for="{{tabbar.list}}" wx:key="index">      <image class="tabbar_icon" src="{{item.selected?item.selectedIconPath:item.iconPath}}"></image>      <text>{{item.text}}</text>    </navigator>  </view></template>

3.template.wxss

 

.tabbar_box {  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -webkit-box-orient: horizontal;  -webkit-box-direction: normal;  -ms-flex-direction: row;  flex-direction: row;  -ms-flex-pack: distribute;  justify-content: space-around;  position: fixed;  bottom: 0;  left: 0;  z-index: 999;  width: 100%;  height: 100rpx;  border-top: 0.5rpx solid #d5d5d5;}.tabbar_nav {  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -webkit-box-orient: vertical;  -webkit-box-direction: normal;  -ms-flex-direction: column;  flex-direction: column;  -webkit-box-pack: center;  -ms-flex-pack: center;  justify-content: center;  -webkit-box-align: center;  -ms-flex-align: center;  align-items: center;  font-size: 25rpx;  height: 100%;}.tabbar_icon {  width: 40rpx;  height: 40rpx;}

在需要用的页面(wxml)添加如下代码

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

在需要的样式(wxss)添加如下代码

@import "template.wxss";

在需要的js页面添加如下代码:

var dsq, app = getApp();添加在顶部
tabbar: {},在data中添加
app.editTabBar();在onLoad中添加

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持VEVB武林网。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表