微信小程序-使用colorUI商城底部导航_colorui底部导航如何主页加载进去

效果图

WXML

<home wx:if="{{PageCur=='home'}}"></home>
<class wx:if="{{PageCur=='class'}}"></class>
<cart wx:if="{{PageCur=='cart'}}"></cart>
<my wx:if="{{PageCur=='my'}}"></my>
<view class="cu-bar tabbar bg-white shadow foot">
  <view class="action" bindtap="NavChange" data-cur="home">
    <view class='cuIcon-cu-image'>
      <image src="/images/tabbar/home{{PageCur=='home'?'_cur':''}}.png"></image>
    </view>
    <view class="{{PageCur=='home'?'text-orange':'text-gray'}}">首页</view>
  </view>
  <view class="action" bindtap="NavChange" data-cur="class">
    <view class='cuIcon-cu-image'>
      <image src="/images/tabbar/class{{PageCur=='class'?'_cur':''}}.png"></image>
    </view>
    <view class="{{PageCur=='class'?'text-orange':'text-gray'}}">分类</view>
  </view>
  <view class="action text-gray add-action">
    <button class="cu-btn cuIcon-scan bg-orange shadow" bindtap='goto'></button>
    扫一扫
  </view>
  <view class="action" bindtap="NavChange" data-cur="cart">
    <view class='cuIcon-cu-image'>
      <image src="/images/tabbar/cart{{PageCur=='cart'?'_cur':''}}.png"></image>
    </view>
    <view class="{{PageCur=='cart'?'text-orange':'text-gray'}}">购物车</view>
  </view>
  <view class="action" bindtap="NavChange" data-cur="my">
    <view class='cuIcon-cu-image'>
      <image src="/images/tabbar/my{{PageCur=='my'?'_cur':''}}.png"></image>
    </view>
    <view class="{{PageCur=='my'?'text-orange':'text-gray'}}">我的</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
28
29
30
31
32
33
34

WXSS

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

JS

const app = getApp()

Page({
  data: {
    PageCur: 'home'
  },
  NavChange(e) {
    this.setData({
      PageCur: e.currentTarget.dataset.cur
    })
  },
  goto: function () {
    wx.scanCode({
      success(res) {
        wx.showModal({
          title: '扫码内容',
          content: res.result,
        })
      }
    })
  },
  onLoad: function () {

  }
})
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

JSON

{
  "usingComponents": {
    "home": "/pages/home/home",
    "class": "/pages/class/class",
    "cart": "/pages/cart/cart",
    "my": "/pages/my/my"
  }
}
1
2
3
4
5
6
7
8