微信小程序--自定义tabBar组件

微信小程序

前言

用过微信提供的tabBar组件就会发现，局限性不少，样式上的局限性不说，tabBar是写在app.json配置文件中的，这就意味着不能动态改变tabBar的个数，不能在tabBar上面添加函数等等。

加上最近客户有需求，要求tabBar动态改变个数，于是折腾许久写了一个，分享出来。

代码

wxml

wxml模板

1
2
3
4
5
6
7
8
9
10
11
12
<template name="tabBar">
<view class="tabBar">
  <block wx:for="{{tabBar}}" wx:for-item="item" wx:key="tabBar">
    <view class="tabBar-item">
      <view bindtap="goTab" data-path="{{item.pagePath}}">
        <view><image class="icon" src='{{item.iconPath}}'></image></view>
        <view class="{{item.active== true ? 'tabBartext' :''}}">{{item.text}}</view>
      </view>
    </view>
  </block>
</view>
</template>

wxss

wxss模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.icon{
  width:54rpx;
  height: 54rpx;
}
.tabBar{
  height: 90rpx;
  width:100%;
  position: fixed;
  bottom:0;
  left: 0;
  padding:10rpx;
  background:#F7F7FA;
  font-size:20rpx;
  color:#8A8A8A;
  box-shadow: 6rpx 6rpx 6rpx 6rpx #aaa;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
 .tabBar-item{
  text-align: center;
  overflow: hidden;
  width: 120rpx;
}
.tabBartext{
  color:#1296DB;
}

tabbar数据

tabbar的数据采用仿照官方原生tabbar配置文件的写法，可以通过后台更改值实现tabbar个数的动态变化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
var tabbarData = [
  {
    "active": false,
    "id":0,
    "pagePath": "/pages/index/index",
    "iconPath": "/imgs/icon/index.png",
    "selectedIconPath": "/imgs/icon/index-s.png",
    "text": "首页"
  },
  {
    "active": false,
    "id": 1,
    "pagePath": "/pages/classify/classify",
    "iconPath": "/imgs/icon/classify.png",
    "selectedIconPath": "/imgs/icon/classify-s.png",
    "text": "分类"
  },
  {
    "active": false,
    "id": 2,
    "pagePath": "/pages/cart/cart",
    "iconPath": "/imgs/icon/cart.png",
    "selectedIconPath": "/imgs/icon/cart-s.png",
    "text": "购物车"
  },
  {
    "active": false,
    "id": 3,
    "pagePath": "/pages/store/store",
    "iconPath": "/imgs/icon/store.png",
    "selectedIconPath": "/imgs/icon/store-s.png",
    "text": "门店"
  },
  {
    "active": false,
    "id": 4,
    "pagePath": "/pages/user/user",
    "iconPath": "/imgs/icon/user.png",
    "selectedIconPath": "/imgs/icon/user-s.png",
    "text": "我的"
  }
];

js

首先是公用方法，在utils.js文件里添加下面的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//tabbar的样式切换
//id 当前页面在tabBar数组中的下标
function tabbar(bindName, id, target, tabbarData) {
  var that = target;
  var bindData = {};
  var newTabbar = tabbarData;
  newTabbar[id]['iconPath'] = newTabbar[id]['selectedIconPath']
  newTabbar[id]['active'] = true;
  bindData[bindName] = newTabbar
  that.setData({ bindData });
}

// tab跳转
//id 当前页面在tabBar数组中的下标
function goTab(e, that, id) {
  var path = e.currentTarget.dataset.path;
  // 防止重复点击跳转
  if (path === that.data.bindData.tabBar[id].pagePath) {
    return false;
  }
  wx.reLaunch({
    url: path,
  })
}

//导出方法
module.exports = {
  tabbar: tabbar,
  goTab: goTab,
}

使用

在要使用tabbar的页面wxml里引入以下代码

1
2
<import src="../template/tabbar/tabbar-template.wxml" />
<template is="tabBar" data="{{tabBar:bindData.tabBar}}"/>

wxss里面引入

1
@import "../template/tabbar/tabbar-template.wxss" ;

在要使用tabbar的页面引入utils方法

1
var utils = require("../../utils/util.js");

首页的js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
var utils = require("../../utils/util.js");

Page({
  data: {

   },

onLoad: function (options) {

    var tabbarData = "后台请求获取到上面的tabbar数据";

    // 查询包含首页字符的页面id
    function checkData(item) {
      return item.text == "首页";
    }
    var tabbarId = tabbarData.find(checkData).id;

    this.setData({
      tabbarId: tabbarId
    })

    // 调用utils.tabbar方法，切换tabbar的样式。
    utils.tabbar("tabBar", that.data.tabbarId, that, tabbarData);

    //引用的数组因为切换样式时数据被修改，保存到本地存储时是被修改状态
    //我们需要的是数据从后台传来时的初始状态，进行下列还原操作
    //也可以对数组进行深度拷贝，对拷贝的数组进行存储操作
    tabbarData[0].active = false;
    tabbarData[0].iconPath = "/imgs/icon/index.png";

    //避免每次加载tabbar页面都发送请求，首页加载成功后保存在本地存储。
    wx.setStorageSync("tabbarData", tabbarData);

},

  // Tabbar跳转
  goTab:function(e){
    utils.goTab(e, this, this.data.tabbarId)
  }
})

其他要显示tabbar页面的js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var utils = require("../../utils/util.js");

Page({
  data: {

   },

  onLoad: function (options) {

      // 获取tabbar数组的初始状态
      var tabbarData = wx.getStorageSync("tabbarData");
      function checkData(item) {
        return item.text == "分类";
        //其他页面赋值右边的字符串输入对应的页面描述，如"购物车"，"我的"
      }
      var tabbarId = tabbarData.find(checkData).id;

      this.setData({
        tabbarId: tabbarId
      })

      utils.tabbar("tabBar", this.data.tabbarId, this, tabbarData);

  },
    // Tabbar跳转
    goTab:function(e){
      utils.goTab(e, this, this.data.tabbarId)
    }
})

这样效果就实现了，后台改变传递过来的参数，tabbar的数量可以动态改变。

如果大家有什么更好的实现方法，欢迎讨论交流。

本文标题:微信小程序--自定义tabBar组件

文章作者:Sanakey

发布时间:2018-07-03, 16:01:12

最后更新:2018-07-03, 17:28:36

原始链接:https://sanakey.github.io/2018/07/03/微信小程序-自定义tabBar组件/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。


感谢打赏，错误之处欢迎指正交流(`・ω・´) !~~



文章目录
  1. 1. 前言
  2. 2. 代码
    1. 2.1. wxml
    2. 2.2. wxss
    3. 2.3. tabbar数据
    4. 2.4. js
  3. 3. 使用
|