评论

微信小程序自定义tabBar组件开发

微信小程序的tabBar只能用在主页面,当有些子页面需要用到tabBar时,我们可以自定义组件进行开发。

1.新建template文件夹用于保存tabBar模板,template/template.wxml

<template name="tabBar">
  <view class="tabBar">
  	<block wx:for="{{tabBar}}" wx:for-item="item" wx:key="tabBar">
    	<view class="tabBar-item">
      		<navigator open-type="reLaunch" url="{{item.pagePath}}">
        		<view><image class="icon" src='{{item.iconPath}}'></image></view>
        		<view class="{{item.current== 1 ? 'tabBartext' :''}}">{{item.text}}</view>
      		</navigator>
    	</view>
  	</block>
 </view>
</template>

2.创建template.wxss

.icon{
  width:54rpx;
  height: 54rpx;
}
.tabBar{
  width:100%;
  position: fixed;
  bottom:0;
  padding:10rpx;
  margin-left:-4rpx;
  background:#F7F7FA;
  font-size:24rpx;
  color:#8A8A8A;
  box-shadow: 3rpx 3rpx 3rpx 3rpx #aaa; 
  z-index: 9999;
}

 .tabBar-item{
  float:left;
  width:20%;
  text-align: center;
  overflow: hidden;
}
/*当前字体颜色*/
.tabBartext{
  color:red;
}
.navigator-hover{
  background-color: rgba(0, 0, 0, 0);
}

3.创建template.js,初始化数据

//初始化数据
function tabbarinit() {
  return [
    {
      "current": 0,
      "pagePath": "/pages/dashboard/index",
      "iconPath": "/images/goback.png",
      "text": "返回商城"
    },
    {
      "current": 0,
      "pagePath": "/pages/collage/index",
      "iconPath": "/images/collage1.png",
      "selectedIconPath": "/images/collage.png",
      "text": "拼团首页"
    },
    {
      "current": 0,
      "selectedIconPath": "/images/list.png",
      "iconPath": "/images/list1.png",
      "pagePath": "/pages/collage-list/index",
      "text": "活动列表"  

    },
    {
      "current": 0,
      "selectedIconPath": "/images/collage-order.png",
      "iconPath": "/images/collage-order1.png",
      "pagePath": "/pages/collage-order/index",
      "text": "我的订单"  
    },
    {
      "current": 0,
      "selectedIconPath": "/images/group.png",
      "iconPath": "/images/group1.png",
      "pagePath": "/pages/group/index",
      "text": "我的团"
    }
  ]

}
//tabbar 主入口
function tabbarmain(bindName = "tabdata", id, target) {
  var that = target;
  var bindData = {};
  var otabbar = tabbarinit();
  otabbar[id]['iconPath'] = otabbar[id]['selectedIconPath']//换当前的icon
  otabbar[id]['current'] = 1;
  bindData[bindName] = otabbar
  that.setData({ bindData });
}

module.exports = {
  tabbar: tabbarmain
}

4.使用方法

  • 先把样式文件载入app.wxss
@import "/template/template.wxss";
  • 新建一个页面,比如index.wxml,引入模板
<import src="../../template/template.wxml"/>
<template is="tabBar" data="{{tabBar:bindData.tabBar}}"/>

  • index.js 初始化数据
var template = require('../../template/template.js');

Page({

  onLoad: function () {
    template.tabbar("tabBar", 0, this)//0表示第一个tabbar
  },
})
  • 其它新建页面也跟index.wxml一样,初始化数据。

效果如图

最后一次编辑于  2020-04-09  
点赞 2
收藏
评论

9 个评论

  • 相
    2020-07-01

    电脑测试可以,在手机上,怎么不显示呢?

    2020-07-01
    赞同 1
    回复
  • 相
    2020-07-01

    这个五个菜单的,四个菜单了怎样办 ?

    2020-07-01
    赞同
    回复
  • 兴哥
    兴哥
    2020-05-25

    求问大神这个底部的自定义tabBar能凸出来么,我怎么弄都是被剪接了啊,要的是这个效果……

    2020-05-25
    赞同
    回复
  • CJoy🏂
    CJoy🏂
    2020-05-19

    按照这个可以做到tabBar透明?或者有办法设置透明度?

    2020-05-19
    赞同
    回复
  • 刘同学🎮
    刘同学🎮
    2020-04-09

    提示我this.getData()不是一个方法是怎么肥事

    2020-04-09
    赞同
    回复 13
    • KOSS
      KOSS
      2020-04-09
      this.getData() 去掉这一行,没用的。
      2020-04-09
      回复
    • 刘同学🎮
      刘同学🎮
      2020-04-09回复KOSS
      好的感谢!!!
      2020-04-09
      回复
    • R
      R
      2020-04-13回复KOSS
      大佬,切换页面的时候有闪烁的效果,而且仍然会重新加载,如何解决重新加载的问题,缓存整个页面的数据?
      2020-04-13
      回复
    • Aか潘   💯
      Aか潘 💯
      2020-04-22回复R
      同问
      2020-04-22
      回复
    • 🤪 🤪 🤪 🤪
      🤪 🤪 🤪 🤪
      2020-04-27回复R
      请问这个问题解决了吗?
      2020-04-27
      回复
    查看更多(8)
  • 熊_梓城
    熊_梓城
    2020-04-05

    而且图片加载也一直显示无法加载

    2020-04-05
    赞同
    回复 13
    • 刘同学🎮
      刘同学🎮
      2020-04-09
      哥,你的弄好了没
      2020-04-09
      回复
    • 熊_梓城
      熊_梓城
      2020-04-09回复刘同学🎮
      我的搞好了
      2020-04-09
      回复
    • 熊_梓城
      熊_梓城
      2020-04-09
      我的template文件放在跟pages同一个层级的 不是放在他下面
      2020-04-09
      回复
    • 熊_梓城
      熊_梓城
      2020-04-09
      得把template.js文件放在app.json同一级这里 不然真机调试会出错 显示不出导航栏 然后在要使用自定义导航栏的js文件上面写第二张图这个
      2020-04-09
      回复
    • 熊_梓城
      熊_梓城
      2020-04-09
      wxml里也要写
      2020-04-09
      回复
    查看更多(8)
  • 熊_梓城
    熊_梓城
    2020-04-05

    你好,如果这里报错this.getData is not a function的话应该怎么修改?

    2020-04-05
    赞同
    回复 2
    • 刘同学🎮
      刘同学🎮
      2020-04-09
      我丢,这个问题跟我的一样!!!!
      2020-04-09
      回复
    • KOSS
      KOSS
      2020-04-09
      this.getData()  去掉这一行。
      2020-04-09
      回复
  • 月半丫头
    月半丫头
    2020-03-27

    这样写是不是每次切换页面都会有页面跳转的感觉啊,感觉一闪一闪的,要是能自定义修改tabbar的pagePath就好了

    2020-03-27
    赞同
    回复 1
    • Aか潘   💯
      Aか潘 💯
      2020-04-22
      这个你有解决吗
      2020-04-22
      回复
  • Admin²⁰²¹
    Admin²⁰²¹
    2020-02-15

    感谢分享

    2020-02-15
    赞同
    回复
登录 后发表内容