用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序ColorUI自定义底部导航条TabBar

Rolan 2021-1-11 09:10

ColorUI其实是一套小程序的CSS框架,最近使用的比较多,刚好在自定义底部导航栏遇到一些坑,特有以此推文。

一、项目中引入ColorUI

ColorUI其实是一套小程序的CSS框架,最近使用的比较多,刚好在自定义底部导航栏遇到一些坑,特有以此推文。

微信小程序自定义底部导航条tabBar,有两种主流方式,一种是将TabBar页面和底部导航条作为组件,进行模拟切换,但是严格来说这种方式不太适用于复杂场景,很多页面级的生命周期等属性无法使用。另外一种就是通过微信小程序自定义TabBar接口,来实现接管系统TabBar,这也是本文的实现方法,能够完美复刻默认系统TabBar,更可增加自定义的功能实现。

一、通过文件复制引入

  1. 进入ColorUI 的GitHub,拉下所有代码,项目中有三个目录,一个是ColorUI-UniApp这个是uni-app版本,一个是demo完整的案例版本,一个是template初始开发版本,复制demo或者template文件夹中的ColorUI文件夹至项目根目录。

  2. App.wxss 引入关键Css main.wxss icon.wxss 即可。

    @import "ColorUI/main.wxss";
    @import "ColorUI/icon.wxss";
    复制代码

二、app.json中配置系统tabBar

虽然是自定义tabBar,但是tabBar的配置还是要有。

"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/category/category",
      "text": "分类"
    }, {
      "pagePath": "pages/cart/cart",
      "text": "购物车"
    }, {
      "pagePath": "pages/user/user",
      "text": "我的"
    }]
  },
复制代码

三、app.json系统 tabBar 设置 "custom": true

tabBar配置中 "custom": true,表示自定义tabBar,由项目根目录下的custom-tab-bar组件接管tabBar渲染。

"tabBar": {
	"custom": true,
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/category/category",
      "text": "分类"
    }, {
      "pagePath": "pages/cart/cart",
      "text": "购物车"
    }, {
      "pagePath": "pages/user/user",
      "text": "我的"
    }]
  },
复制代码

四、在项目根目录新建custom-tab-bar组件

  1. 需要在根目录建 custom-tab-bar 文件夹
  2. 再在custom-tab-bar文件夹内建index 组件文件

五、引入ColorUI样式至custom-tab-bar组件

  1. 因为组件内需要使用ColorUI的样式,但是在app.wxss中引入是作用不到custom-tab-bar组件的,所以需要在custom-tab-bar组件中index.wxss引入ColorUI样式文件。
  2. 虽然引入ColorUI的样式,但是由于微信小程序的自定义组件只支持class选择器,所以底部tabBar样式无法完整的显示出来,样式上会有差别,需要自行调整样式。
@import "../ColorUI/main.wxss";
@import "../ColorUI/icon.wxss";
复制代码

六、选取ColorUI底部导航栏并引入

用微信小程序导入ColorUI的dome在操作条>底部操作条中选取相应的导航条,复制到custom-tab-bar组件的index.wxml

<view class="cu-bar tabbar bg-black">
    <view class="action text-green">
      <view class="cuIcon-homefill"></view>
        首页
    </view>
    <view class="action text-gray">
      <view class="cuIcon-similar"></view>
        分类
    </view>
    <view class="action text-gray add-action">
      <button class="cu-btn cuIcon-add bg-green shadow"></button>
      发布
    </view>
    <view class="action text-gray">
      <view class="cuIcon-cart">
        <view class="cu-tag badge">99</view>
      </view>
      购物车
    </view>
    <view class="action text-gray">
      <view class="cuIcon-my">
        <view class="cu-tag badge"></view>
      </view>
      我的
    </view>
  </view>
复制代码

七、设置底部切换高亮,并进行页面切换

(1)文件:custom-tab-bar/index.js
  1. 首先需要设置data
//当前高亮项
selected: 0

//tabBar页面数据
tabList: [
	{
		"pagePath": "pages/index/index",
		"text": "首页"
	},
	{
		"pagePath": "pages/category/category",
		"text": "分类"
	},
	{
		"pagePath": "pages/cart/cart",
		"text": "购物车"
	},
	{
		"pagePath": "pages/user/user",
		"text": "我的"
	}
]
复制代码
  1. 设置tabBar页面切换高亮函数
switchTab(e) {
    let key = Number(e.currentTarget.dataset.index);
    let tabList = this.data.tabList;
    let selected= this.data.selected;

    if(selected !== key){
     this.setData({
       selected:key
     });
     wx.switchTab({
       url: `/${tabList[key].pagePath}`,
     })
    }
},
复制代码
  1. custom-tab-bar/index.js完整代码
// custom-tab-bar/index.js
Component({
	properties: {},
	data: {
        //当前高亮项
		selected: 0,
        //tabBar页面数据
		tabList: [
          {
            "pagePath": "pages/index/index",
            "text": "首页"
          },
          {
            "pagePath": "pages/category/category",
            "text": "分类"
          },
          {
            "pagePath": "pages/cart/cart",
            "text": "购物车"
          },
          {
            "pagePath": "pages/user/user",
            "text": "我的"
          }
		]
	},
	attached: function() {},
	methods: {
		//底部切换
		switchTab(e) {
			let key = Number(e.currentTarget.dataset.index);
			let tabList = this.data.tabList;
			let selected= this.data.selected;
			
			if(selected !== key){
				this.setData({
					selected:key
				});
				wx.switchTab({
					url: `/${tabList[key].pagePath}`,
				})
			}
		},
	}
})
复制代码
(2)文件:custom-tab-bar/index.wxml
  1. 动态绑定class
class="action {{selected === 0 ? 'active' : 'default'}}"
复制代码
  1. 绑定data-index参数,绑定switchTab函数
<view class="cu-bar tabbar bg-black">
    <view class="action {{selected === 0 ? 'active' : 'default'}}" data-index="0" bindtap="switchTab">
      <view class="cuIcon-homefill"></view>
        首页
    </view>
    <view class="action {{selected === 1 ? 'active' : 'default'}}" data-index="1" bindtap="switchTab">
      <view class="cuIcon-similar"></view>
        分类
    </view>
    <view class="action text-gray add-action">
      <button class="cu-btn cuIcon-add bg-green shadow"></button>
      发布
    </view>
    <view class="action {{selected === 2 ? 'active' : 'default'}}" data-index="2" bindtap="switchTab">
      <view class="cuIcon-cart">
        <view class="cu-tag badge">99</view>
      </view>
      购物车
    </view>
    <view class="action {{selected === 3 ? 'active' : 'default'}}" data-index="3" bindtap="switchTab">
      <view class="cuIcon-my">
        <view class="cu-tag badge"></view>
      </view>
      我的
    </view>
</view>
复制代码
(3)文件:custom-tab-bar/index.wxss
  1. 设置 默认.default样式 高亮 .active样式
.active{
  color: #39b54a;
}
.default{
  color: #fff;
}
复制代码
(4)文件:

​ pages/index/index.js

​ pages/category/category.js

​ pages/cart/cart.js

​ pages/user/user.js

  1. 设置给tabBar页面当前项保持高亮
//需要在钩子函数中手动调用  tabBar()
tabBar() {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
		this.getTabBar().setData({
			selected: 0
		})
	}
}, 
复制代码
  1. 各个页面代码
//pages/index/index.js
//需要在钩子函数中手动调用  tabBar()
tabBar() {
	if (typeof this.getTabBar === 'function' && this.getTabBar()) {
		this.getTabBar().setData({
			selected: 0
		})
	}
},
//pages/category/category.js
//需要在钩子函数中手动调用  tabBar()    
tabBar() {
	if (typeof this.getTabBar === 'function' && this.getTabBar()) {
		this.getTabBar().setData({
			selected: 1
		})
	}
},
//pages/cart/cart.js
//需要在钩子函数中手动调用  tabBar()    
tabBar() {
	if (typeof this.getTabBar === 'function' && this.getTabBar()) {
		this.getTabBar().setData({
			selected: 2
		})
	}
},
//pages/user/user.js
//需要在钩子函数中手动调用  tabBar()    
tabBar() {
	if (typeof this.getTabBar === 'function' && this.getTabBar()) {
		this.getTabBar().setData({
			selected:3
		})
	}
},
复制代码


作者:天小天
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏