微信小程序-使用colorUI商城底部导航

效果图

WXML

  
    
      
    
    首页
  
  
    
      
    
    分类
  
  
    
    扫一扫
  
  
    
      
    
    购物车
  
  
    
      
    
    我的
  

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

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 () {

  }
})

JSON

{
  "usingComponents": {
    "home": "/pages/home/home",
    "class": "/pages/class/class",
    "cart": "/pages/cart/cart",
    "my": "/pages/my/my"
  }
}