WeChat gadget WeUI navigation component

May 21, 2021 WeChat Mini Program Development Document

1. Example code:

2. Navigation

3. The list of properties

4. Slot

5. Example code:

6. Tabbar

7. The list of properties

Navigation

Navigation is the top navigation component of the applet, which you can use instead of the native navigation bar when the page is configured with the nationalStyle set to custom.

Example code:

{
    "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">小程序自定义导航栏</view>
    </view>
    <view class="page__bd page__bd_spacing">
        <button class="weui-btn" type="primary" bindtap="toggleLoading">触发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">设置显示 / 隐藏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
    })
  }
})

The list of properties

Property	Type	The default	Required	Description
ext-class	string		Whether	A class added to the internal structure of a component that can be used to modify the style inside a component
title	string		Whether	The navigation title, if not provided, is valid for the slot named center
back	boolean	true	Whether	Whether the return button is displayed, the default click of the button will execute the navigateBack, and if it is false, the slot named loft is valid
delta	number	1	Whether	Valid when the back is true, representing the delta parameter of the navigateback
background	string	#f8f8f8	Whether	Navigate the background color
color	string		Whether	The navigation color
loading	boolean		Whether	Whether to display the loading on the left side of the title
show	boolean		Whether	Show hidden navigation, hidden when the height of the national is still in place
animated	boolean		Whether	There is an opacity transition animation when the hidden navigation is displayed
bindback	eventhandler		Whether	When the back is true, click the back button to trigger this event, and the detail contains delta

Slot

Name	Describe
left	The left slot, displayed in the back button position, is valid when the back is false
center	The title slot, displayed at the title position, is valid when the title is empty
right	Shown on the right side of the navigation

Tabbar

Tabbar components can also be used as custom Tabbar for small programs

Example code:

{
  "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": "设置",
          "iconPath": "../../images/tabbar_icon_setting_default.png",
          "selectedIconPath": "../../images/tabbar_icon_setting_active.png",
            badge: 'New'
        }]
    },
    tabChange(e) {
        console.log('tab change', e)
    }
});

The list of properties

Property	Type	The default	Required	Description
ext-class	string		Whether	A class added to the internal structure of a component that can be used to modify the style inside a component
list	array<object>		Whether	An array of Tabbar items, according to the specification, must have at least 2 Tabbar items
current	number	0	Whether	The underseat of the tabbar item currently selected
bindchange	eventhandler		Whether	This event is triggered when the Tabbar entry is changed to , the detail is index, item , index is Tabbar underseat, and item is the configuration of the corresponding Tabbar item

The list property is an array of objects, each representing a Tabbar item whose field means

The field name	Type	Required	Description
text	string	Is	The title of the Tabbar item
iconPath	string	Whether	Tabbar item's icon picture path, it is recommended to use an absolute path, relative to the directory where the component is located.
selectedIconPath	string	Whether	When the Tabbar item is selected, an absolute path is recommended, relative to the directory where the component is located.
badge	string	Whether	Whether to show Tabbar's Badge in the upper right corner

WeChat gadget WeUI navigation component

Table of contents

Navigation

Example code:

The list of properties

Slot

Tabbar

Example code:

The list of properties

Cookie Consent