找回密码
 立即注册

QQ登录

只需一步,快速开始

[工具插件] 微信小程序 自定义tabbar

[复制链接]
查看: 1837|回复: 3
最佳答案
0 

11

主题

18

帖子

189

积分

新人求带

积分
189
 楼主| 发表于 2017-2-17 18:40:03 | 显示全部楼层 |阅读模式
微信小程序 自定义tabbar
GIF.gif
创建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.         <block wx:for="{{tabbar.list}}" wx:for-item="item" wx:key="index">
  4.             <navigator class="tabbar_nav" url="{{item.pagePath}}" style="width:{{1/tabbar.list.length*100}}%; color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="redirect">
  5.                 <image class="tabbar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image>
  6.                 <text>{{item.text}}</text>
  7.             </navigator>
  8.         </block>
  9.     </view>
  10. </template>
复制代码

wxss布局
  1. .tabbar_box{
  2.     display: flex;
  3.     flex-direction: row;
  4.     justify-content: space-around;
  5.     position: fixed;
  6.     bottom: 0;
  7.     left: 0;
  8.     z-index: 999;
  9.     width: 100%;
  10.     height: 120rpx;
  11.     border-top: 1rpx solid gray;
  12. }

  13. .tabbar_nav{
  14.     display: flex;
  15.     flex-direction: column;
  16.     justify-content: center;
  17.     align-items: center;
  18.     font-size: 28rpx;
  19.     height: 100%;
  20. }

  21. .tabbar_icon{
  22.     width: 61rpx;
  23.     height: 61rpx;
  24. }
复制代码

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

重点来了 tabbar的参数配置
  1. tabbar:{
  2.       color: "#000000",
  3.       selectedColor: "#0f87ff",
  4.       backgroundColor: "#ffffff",
  5.       borderStyle: "black",
  6.       list: [
  7.         {
  8.           pagePath: "/pages/tabbar/tabbar",
  9.           text: "项目",
  10.           iconPath: "/images/item.png",
  11.           selectedIconPath: "/images/item_HL.png",
  12.           selected: true
  13.         },
  14.         {
  15.           pagePath: "/pages/address/address",
  16.           text: "通讯录",
  17.           iconPath: "/images/ts.png",
  18.           selectedIconPath: "/images/ts1.png",
  19.           selected: false
  20.         },
  21.         {
  22.           pagePath: "/pages/personal/personal",
  23.           text: "文件",
  24.           iconPath: "/images/wjj.png",
  25.           selectedIconPath: "/images/wjj1.png",
  26.           selected: false
  27.         }
  28.       ],
  29.       position: "bottom"
  30.     }
复制代码

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

最后还有一个比较重要的点 在app.js里面的一个函数
  1. editTabBar: function(){
  2.     var tabbar = this.globalData.tabbar,
  3.         currentPages = getCurrentPages(),
  4.         _this = currentPages[currentPages.length - 1],
  5.         pagePath = _this.__route__;
  6.     (pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
  7.     for(var i in tabbar.list){
  8.       tabbar.list[i].selected = false;
  9.       (tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
  10.     }
  11.     _this.setData({
  12.       tabbar: tabbar
  13.     });
  14.   },
复制代码

我们完整的app.js是这样的
  1. //app.js
  2. App({
  3.   onLaunch: function () {
  4.     //调用API从本地缓存中获取数据
  5.     var logs = wx.getStorageSync('logs') || []
  6.     logs.unshift(Date.now())
  7.     wx.setStorageSync('logs', logs)
  8.   },
  9.   getUserInfo:function(cb){
  10.     var that = this
  11.     if(this.globalData.userInfo){
  12.       typeof cb == "function" && cb(this.globalData.userInfo)
  13.     }else{
  14.       //调用登录接口
  15.       wx.login({
  16.         success: function () {
  17.           wx.getUserInfo({
  18.             success: function (res) {
  19.               that.globalData.userInfo = res.userInfo
  20.               typeof cb == "function" && cb(that.globalData.userInfo)
  21.             }
  22.           })
  23.         }
  24.       })
  25.     }
  26.   },
  27.   editTabBar: function(){
  28.     var tabbar = this.globalData.tabbar,
  29.         currentPages = getCurrentPages(),
  30.         _this = currentPages[currentPages.length - 1],
  31.         pagePath = _this.__route__;
  32.     (pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
  33.     for(var i in tabbar.list){
  34.       tabbar.list[i].selected = false;
  35.       (tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
  36.     }
  37.     _this.setData({
  38.       tabbar: tabbar
  39.     });
  40.   },
  41.   globalData:{
  42.     userInfo:null,
  43.     tabbar:{
  44.       color: "#000000",
  45.       selectedColor: "#0f87ff",
  46.       backgroundColor: "#ffffff",
  47.       borderStyle: "black",
  48.       list: [
  49.         {
  50.           pagePath: "/pages/tabbar/tabbar",
  51.           text: "项目",
  52.           iconPath: "/images/item.png",
  53.           selectedIconPath: "/images/item_HL.png",
  54.           selected: true
  55.         },
  56.         {
  57.           pagePath: "/pages/address/address",
  58.           text: "通讯录",
  59.           iconPath: "/images/ts.png",
  60.           selectedIconPath: "/images/ts1.png",
  61.           selected: false
  62.         },
  63.         {
  64.           pagePath: "/pages/personal/personal",
  65.           text: "文件",
  66.           iconPath: "/images/wjj.png",
  67.           selectedIconPath: "/images/wjj1.png",
  68.           selected: false
  69.         }
  70.       ],
  71.       position: "bottom"
  72.     }
  73.   }
  74. })
复制代码

生成的东西我没有删掉

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

在wxml引入创建的模板并使用
  1. <import src="../tabbar/tabbar.wxml"/>
  2. <template is="tabbar" data="{{tabbar}}"/>
复制代码

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

wxss中引入样式
  1. @import "/pages/tabbar/tabbar.wxss"
复制代码

js中调用函数
  1. //获取app实例
  2. var app = getApp();

  3. Page({
  4.   data:{
  5.     tabbar:{}
  6.   },
  7.   onLoad:function(options){
  8.     // 页面初始化 options为页面跳转所带来的参数

  9.     //调用函数
  10.     app.editTabBar();
  11.   },
  12.   onReady:function(){
  13.     // 页面渲染完成
  14.   },
  15.   onShow:function(){
  16.     // 页面显示
  17.   },
  18.   onHide:function(){
  19.     // 页面隐藏
  20.   },
  21.   onUnload:function(){
  22.     // 页面关闭
  23.   }
  24. })
复制代码

注意在每个配置在tabbar中的页面都要有这三步,因为这个是页面跳转了

还有一个问题就是页面跳转的时候会闪一下,网络慢的时候更明显

后面我会做一个不是跳转页面的tabbar

给个回复吧
游客,如果您要查看本帖隐藏内容请回复
回复

使用道具 举报

最佳答案
0 

1

主题

21

帖子

553

积分

略知一二

积分
553
发表于 2017-2-23 13:37:02 | 显示全部楼层
这个不错,必须要学习一下.
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

3

帖子

52

积分

新人求带

积分
52
发表于 2017-4-20 12:24:36 | 显示全部楼层
期待不跳转的toolbar
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

1

帖子

80

积分

新人求带

积分
80
发表于 3 天前 | 显示全部楼层
顶一下顶一下顶一下顶一下
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


易域网-您身边的域名管家

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

广告推广
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com