前言

Color UI 是一款適應(yīng)于H5、微信小程序、安卓、ios、支付寶的高顏值，高度自定義的 Css 組件庫。本文介紹了原生微信小程序如何自定義 tabbar 并使用 Color UI 樣式

使用步驟

Color UI 的安裝請自行參考官方文檔，以下步驟以已安裝Color UI為前提

1. 修改app.json配置自定義tabbar

重點：配置 tabbar.custom = true

{
  "pages": [
    "pages/index/index",
    "pages/my/my"
  ],
  "tabBar": {
    "custom": true,
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁"
    }, {
      "pagePath": "pages/my/my",
      "text": "我的"
    }]
  }
}

2. 添加自定義 tabbar 代碼文件

在代碼根目錄下添加入口文件:

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

3. 引入 Color UI 樣式

由于微信小程序自定義 tabbar 無法應(yīng)用 app.wxss 中的全局樣式，所以需要在 custom-tab-bar/index.wxss 文件中將 Color UI 的樣式引入進(jìn)來

/* custom-tab-bar/index.wxss */
@import "../colorui/main.wxss";
@import "../colorui/icon.wxss";

view {
  --green: #39b54a;
  --gray: #aaaaaa;
  --white: #ffffff;
}

4. 編輯 wxml 代碼

在 Corlor UI 文檔中選擇一款底部操作欄，將代碼復(fù)制到 custom-tab-bar/index.wxml 文件中，并稍作修改

<!-- custom-tab-bar/index.wxml -->
<view class="cu-bar tabbar bg-white foot">
  <!-- 首頁 -->
  <view class="action {{PageCur=='home'?'text-green':'text-gray'}}" data-cur="home" bindtap="NavChange">
    <view class="cuIcon-homefill"></view> 首頁
  </view>
  <!-- 我的、左上角紅色圓點 -->
  <view class="action {{PageCur=='mine'?'text-green':'text-gray'}}" data-cur="mine" bindtap="NavChange">
    <view class="cuIcon-my">
      <!-- 紅色圓點（數(shù)字角標(biāo)） -->
      <view class="cu-tag badge"></view>
    </view>
    我的
  </view>
</view>

5. 編寫js代碼

// custom-tab-bar/index.js
Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    PageCur: '',
    Page: {
      home: '/pages/index/index',
      mine: '/pages/my/my'
    }
  },
  NavChange(e){
    wx.switchTab({
      url: this.data.Page[e.currentTarget.dataset.cur],
    })
  },
})

6. 編寫tabbar頁面的onShow函數(shù)

當(dāng)tabbar頁面顯示時，我們希望選中的按鈕高亮

// pages/index/index
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow() {
    this.getTabBar().setData({
      PageCur: 'home'
    })
  },


// pages/my/my
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow() {
    this.getTabBar().setData({
      PageCur: 'mine'
    })
  },

效果

代碼片段

總結(jié)

以上就是今天要講的內(nèi)容，本文介紹了原生微信小程序自定義tabbar引入colorui樣式的步驟，若以上內(nèi)容有幫到您，請您動動小手點贊支持，謝謝大家！文章來源地址http://www.zghlxwxcb.cn/news/detail-778384.html

到了這里，關(guān)于原生微信小程序自定義tabbar引入Color UI樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！