经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » 微信小程序 » 查看文章
微信小程序tabbar底部导航
来源:jb51  时间:2018/11/5 10:46:06  对本文有异议

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

1.app.js代码如下:

  1. editTabBar: function() {
  2. var e = this.globalData.tabbar, a = getCurrentPages(), t = a[a.length - 1], s = t.__route__;
  3. 0 != s.indexOf("/") && (s = "/" + s);
  4. for (var n in e.list) e.list[n].selected = !1, e.list[n].pagePath == s && (e.list[n].selected = !0);
  5. t.setData({
  6. tabbar: e
  7. });
  8. },
  9. tabBar: {
  10. color: "#123",
  11. selectedColor: "#1ba9ba",
  12. borderStyle: "#1ba9ba",
  13. backgroundColor: "#fff",
  14. list: [ {
  15. pagePath: "/we7/pages/index/index",
  16. iconPath: "/we7/resource/icon/home.png",
  17. selectedIconPath: "/we7/resource/icon/homeselect.png",
  18. text: "首页"
  19. }, {
  20. pagePath: "/we7/pages/user/index/index",
  21. iconPath: "/we7/resource/icon/user.png",
  22. selectedIconPath: "/we7/resource/icon/userselect.png",
  23. text: "我的"
  24. } ]
  25. },
  26. globalData: {
  27. userInfo: null,
  28. tabbar: {
  29. color: "#333",
  30. selectedColor: "#d0501f",
  31. backgroundColor: "#ffffff",
  32. borderStyle: "#d5d5d5",
  33. list: [ {
  34. pagePath: "/pages/seller/gzt",
  35. text: "工作台",
  36. iconPath: "/pages/images/gzt@3x.png",
  37. selectedIconPath: "/pages/images/gztxz@3x.png",
  38. selected: !0
  39. }, {
  40. pagePath: "/pages/seller/cp/cplb",
  41. text: "商品",
  42. iconPath: "/pages/images/dbdc.png",
  43. selectedIconPath: "/pages/images/dbdcxz.png",
  44. selected: !1
  45. },
  46. position: "bottom"
  47. }
  48. },

template.wxml

  1. <template name="tabbar">
  2. <view class="tabbar_box" style="background-color:{{tabbar.backgroundColor}}; border-top-color:{{tabbar.borderStyle}}; {{tabbar.position=='top'?'top:0':'bottom:0'}}">
  3. <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">
  4. <image class="tabbar_icon" src="{{item.selected?item.selectedIconPath:item.iconPath}}"></image>
  5. <text>{{item.text}}</text>
  6. </navigator>
  7. </view>
  8. </template>

3.template.wxss

  1. .tabbar_box {
  2. display: -webkit-box;
  3. display: -ms-flexbox;
  4. display: flex;
  5. -webkit-box-orient: horizontal;
  6. -webkit-box-direction: normal;
  7. -ms-flex-direction: row;
  8. flex-direction: row;
  9. -ms-flex-pack: distribute;
  10. justify-content: space-around;
  11. position: fixed;
  12. bottom: 0;
  13. left: 0;
  14. z-index: 999;
  15. width: 100%;
  16. height: 100rpx;
  17. border-top: 0.5rpx solid #d5d5d5;
  18. }
  19.  
  20. .tabbar_nav {
  21. display: -webkit-box;
  22. display: -ms-flexbox;
  23. display: flex;
  24. -webkit-box-orient: vertical;
  25. -webkit-box-direction: normal;
  26. -ms-flex-direction: column;
  27. flex-direction: column;
  28. -webkit-box-pack: center;
  29. -ms-flex-pack: center;
  30. justify-content: center;
  31. -webkit-box-align: center;
  32. -ms-flex-align: center;
  33. align-items: center;
  34. font-size: 25rpx;
  35. height: 100%;
  36. }
  37.  
  38. .tabbar_icon {
  39. width: 40rpx;
  40. height: 40rpx;
  41. }
  42.  

在需要用的页面(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中添加

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号