微信小程序 WeUI·導(dǎo)航組件

Navigation

Navigation是小程序的頂部導(dǎo)航組件，當(dāng)頁面配置navigationStyle設(shè)置為custom的時候可以使用此組件替代原生導(dǎo)航欄。

示例代碼：

{
    "usingComponents": {
        "mp-navigation-bar": "../components/navigation-bar/navigation-bar"
    },
    "navigationStyle": "custom",
    "navigationBarTitleText": "UI組件庫"
}

<mp-navigation-bar loading="{{loading}}" show="{{show}}" animated="{{animated}}" color="{{color}}" background="{{background}}" title="UI組件庫" back="{{true}}"></mp-navigation-bar>
<view class="page">
    <view class="page__hd">
        <view class="page__title">Navigation</view>
        <view class="page__desc">小程序自定義導(dǎo)航欄</view>
    </view>
    <view class="page__bd page__bd_spacing">
        <button class="weui-btn" type="primary" bindtap="toggleLoading">觸發(fā)loading</button>
        <button class="weui-btn" type="primary" bindtap="changeColor">修改文字顏色</button>
        <button class="weui-btn" type="primary" bindtap="changeBgColor">修改背景顏色</button>
        <button class="weui-btn" type="primary" bindtap="toggleShow">顯示 / 隱藏</button>
        <button class="weui-btn" type="primary" bindtap="toggleAnimated">設(shè)置顯示 / 隱藏opacity動畫</button>
    </view>
</view>

Page({
  data: {
    loading: false,
    color: '#000',
    background: '#f8f8f8',
    show: true,
    animated: false
  },
  toggleLoading() {
    this.setData({
      loading: !this.data.loading
    })
  },
  changeColor() {
    this.setData({
      color: '#07C160'
    })
  },
  changeBgColor() {
    this.setData({
      background: '#ededed'
    })
  },
  toggleShow() {
    this.setData({
      show: !this.data.show
    })
  },
  toggleAnimated() {
    this.setData({
      animated: !this.data.animated,
      show: !this.data.show
    })
  }
})

屬性列表

Slot

Tabbar

Tabbar組件，也可以用來作為小程序的自定義Tabbar使用

示例代碼：

{
  "usingComponents": {
    "mp-tabbar": "../components/tabbar/tabbar"
  },
  "navigationBarTitleText": "UI組件庫"
}

<view class="page">
    <view class="page__hd">
        <view class="page__title">Tabbar</view>
        <view class="page__desc">類似小程序原生tabbar的組件，可用于自定義tabbar</view>
    </view>
    <mp-tabbar style="position:fixed;bottom:0;width:100%;left:0;right:0;" list="{{list}}" bindchange="tabChange"></mp-tabbar>
</view>

Page({
    data: {
        list: [{
            "text": "對話",
            "iconPath": "../../images/tabbar_icon_chat_default.png",
          "selectedIconPath": "../../images/tabbar_icon_chat_active.png",
            dot: true
        },
        {
            "text": "設(shè)置",
          "iconPath": "../../images/tabbar_icon_setting_default.png",
          "selectedIconPath": "../../images/tabbar_icon_setting_active.png",
            badge: 'New'
        }]
    },
    tabChange(e) {
        console.log('tab change', e)
    }
});

屬性列表

list屬性是對象數(shù)組，每一項表示一個Tabbar項，其字段含義為