E企盈营销工具技术服务商 热线:4006-838-530

微信小程序——底部导航tabBar

E企盈直播平台营销卖货系统

一.最简单的底部导航在全局配置 app.json 中添加 , 所有小程序的页面都会显示出来示例:{  ……  “tabBar”: {    “list”: [      {        “pagePath”: “pages/index/index”,        “iconPath”:””,        “text”: “首页”      },      {        “pagePath”: “pages/logs/logs”,        “iconPath”:””,        “text”: “日志”      }    ]  }, ……list:pagePath : 页面路径  (注意:在list中有的路径指向的页面,如果你想添加一个navigator也跳转到这个页面,那么跳转方式ope-type只能用switchTab !!)text : icon下面显示的文字自定义tabBar(修改tabBar的整体样式,如改变tabBar的颜色等)请参考https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html二 . 自定义底部导航前面最简单的底部导航有很多情况下不能使用,比如:想要使用svg和字体图标 ,比如想要的底部菜单栏个数多于5个(一般情况下小于等于5个 ,我说的是有两个端入口的情况,比如教师端和学生端)自定义导航有两种方式:将导航作为组件 和 将页面作为组件还不会自定义组件的小伙伴看这里:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/(1)将导航作为组件缺点 :会导致页面第一次进入的时候切换会导致有页面闪烁,这个闪烁其实就是url跳转。这里代码就不放了,因为这个缺点实在是我无法容忍的,大家有需要的话,可以去查“自定义tabBar”,总会找到的。(2)将页面作为组件缺点:暂时还不知道效果如下:大致原理就是在主页面上写底部菜单代码,通过绑定这些菜单按钮来更改当前页面主页面代码如下index.wxml<!– 底部切换菜单 –><view class=”tab-bar”>  <block wx:for=”{{tabBar}}” wx:for-item=”item” wx:key=”index”>    <view class=”tab-item {{index==nowIndex?’active’:”}}” bindtap=”{{item.tapFunction}}”>        <view class=”{{item.iconClass}} icons”></view>        <text class=”icon-text”>{{item.text}}</text>    </view>  </block></view><!– 页面容器 –><view class=”container”>  <firstPage wx:if=”{{nowPage==’firstPage’}}”></firstPage>  <secondPage wx:if=”{{nowPage==’secondPage’}}”></secondPage></view>index.jsconst app = getApp()Page({  data: {    nowPage:”firstPage”,    nowIndex:0,    tabBar:[      {        “iconClass”:”iconfont icon-shouye”,        “text”:”第一页”,        “tapFunction”:”toFirst”,        “active”:”active”      },      {        “iconClass”:”iconfont icon-wode”,        “text”:”第二页”,        “tapFunction”: “toSecond”,        “active”: “”      }    ]  },  onLoad: function () {      },  toFirst(){    this.setData({      nowPage:”firstPage”,      nowIndex: 0    })  },  toSecond() {    this.setData({      nowPage: “secondPage”,      nowIndex: 1    })  }})引入组件的index.json{  “usingComponents”:{    “firstPage”:”/component/component-firstPage/component-firstPage”,    “secondPage”:”/component/component-secondPage/component-secondPage”  }}具体代码请在我的github上查看——https://github.com/BigJJing/wechat-tabBar_component/tree/master

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序——底部导航tabBar
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏