2.微信小程序（colorUI）- 构建底部操作条_colorui底部自定义

   写在前面：colorUI中提供了很多好看的底部操作条，如何使用这些底部操作条让我们的项目看起来更美观（ps：微信小程序的底部操作条tabBar总感觉少了点什么）。
一、在colorUI中找到自己想要的底部操作条，并将其拷贝至index.wxml中。

二、添加名为foot 的class，让导航条处于页面底部。

<view class="cu-bar tabbar bg-white shadow foot">
1

三、给每个导航加上bindtap点击事件和自定义属性data-xxx。

<view class="action text-green" bindtap="changeNav" data-nav="homePage">
1

   关于自定义属性的设置和获取：标签里使用data-属性名="属性值"进行设置，使用e.currentTarget.dataset.属性名进行获取。

四、index.js中写上对应方法

Page({
  data: {
    pageNav: 'homePage'
  },
  changeNav(e) {
    this.setData({
      pageNav:e.currentTarget.dataset.nav
    })
  },
})
1
2
3
4
5
6
7
8
9
10

   点击哪个导航，e.currentTarget.dataset.nav就能获取到那个导航中设置的data-nav属性值。
五、点击之后导航高亮。
   在class中使用三元表达式，根据pageNav的值来判断导航是否高亮。

<view class="action {{pageNav=='homePage'?'text-green':'text-gray'}}" bindtap="changeNav" data-nav="homePage">
1

六、完善底部操作条。
1.在app.json的pages中添加页面路径

"pages": [
    "pages/index/index",
    "pages/homePage/index/index",
    "pages/myPage/index/index"
  ],
1
2
3
4
5

保存之后，pages文件下自动创建相关文件

2.回到index文件夹下，在index.json文件中，注册组件

"usingComponents": {
    "home-page": "/pages/homePage/index/index",
    "my-page": "/pages/myPage/index/index"
  }
1
2
3
4

使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径。

3.在index.wxml文件夹中，使用组件

<home-page></home-page>
<my-page></my-page>
1
2

4.根据pageNav的值，使用wx-if来控制组件的显示隐藏

<home-page wx-if='{{pageNav == "homePage"}}'></home-page>
<my-page wx-if='{{pageNav == "myPage"}}'></my-page>
1
2

七、相关代码及效果
index.wxml:

<!--pages/index/index.wxml-->
<home-page wx-if='{{pageNav == "homePage"}}'></home-page>
<my-page wx-if='{{pageNav == "myPage"}}'></my-page>
<view class="cu-bar tabbar bg-white shadow foot">
  <view class="action {{pageNav=='homePage'?'text-green':'text-gray'}}" bindtap="changeNav" data-nav="homePage">
    <view class="cuIcon-homefill"></view> 首页
  </view>
  <view class="action {{pageNav==''?'text-green':'text-gray'}}" bindtap="changeNav" data-nav="">
    <view class="cuIcon-similar"></view> 分类
  </view>
  <view class="action {{pageNav==''?'text-green':'text-gray'}} add-action" bindtap="changeNav" data-nav="">
    <button class="cu-btn cuIcon-add bg-green shadow"></button>
    发布
  </view>
  <view class="action {{pageNav==''?'text-green':'text-gray'}}" bindtap="changeNav" data-nav="">
    <view class="cuIcon-cart">
      <view class="cu-tag badge">99</view>
    </view>
    购物车
  </view>
  <view class="action {{pageNav=='myPage'?'text-green':'text-gray'}}" bindtap="changeNav" data-nav="myPage">
    <view class="cuIcon-my">
      <view class="cu-tag badge"></view>
    </view>
    我的
  </view>
</view>
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

Index.json:

{
  "usingComponents": {
    "home-page": "/pages/homePage/index/index",
    "my-page": "/pages/myPage/index/index"
  }
}
1
2
3
4
5
6

Index.js:

// pages/index/index.js
Page({
  data: {
    pageNav: 'homePage'
  },
  changeNav(e) {
    this.setData({
      pageNav:e.currentTarget.dataset.nav
    })
  },
})
1
2
3
4
5
6
7
8
9
10
11