微信小程序开发文档微信小程序 WeUI·导航组件

2024-02-25 开发教程微信小程序开发文档匿名 0℃

Navigation

Navigation是小程序的顶部导航组件，当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏。

示例代码：

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

属性列表

属性	类型	默认值	必填	说明
ext-class	string		否	添加在组件内部结构的class，可用于修改组件内部的样式
title	string		否	导航标题，如果不提供，则名为center的slot有效
back	boolean	true	否	是否显示返回按钮，默认点击按钮会执行navigateBack，如果为false，则名为left的slot有效
delta	number	1	否	当back为true的时候有效，表示navigateBack的delta参数
background	string	#f8f8f8	否	导航背景色
color	string		否	导航颜色
loading	boolean		否	是否显示标题左侧的loading
show	boolean		否	显示隐藏导航，隐藏的时候navigation的高度占位还在
animated	boolean		否	显示隐藏导航的时候是有opacity过渡动画
bindback	eventhandler		否	在back为true时，点击back按钮触发此事件，detail包含delta

Slot

名称	描述
left	左侧slot，在back按钮位置显示，当back为false的时候有效
center	标题slot，在标题位置显示，当title为空的时候有效
right	在导航的右侧显示

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

属性列表

属性	类型	默认值	必填	说明
ext-class	string		否	添加在组件内部结构的class，可用于修改组件内部的样式
list	array<object>		否	Tabbar的项的数组，按照规范，至少要有2个Tabbar项
current	number	0	否	当前选中的Tabbar项的下标
bindchange	eventhandler		否	Tabbar项发生改成的时候触发此事件，detail为{index, item}，index是Tabbar下标，item是对应的Tabbar项的配置

list属性是对象数组，每一项表示一个Tabbar项，其字段含义为

字段名	类型	必填	说明
text	string	是	Tabbar项的标题
iconPath	string	否	Tabbar项的icon图片路径，建议使用绝对路径，相对路径要相对于组件所在目录的。
selectedIconPath	string	否	Tabbar项选中时的icon，建议使用绝对路径，相对路径要相对于组件所在目录的。
badge	string	否	是否显示Tabbar的右上角的Badge

上一节：微信小程序 WeUI·操作按钮组件

下一节：微信小程序 WeUI·搜索组件

"微信小程序开发文档"的目录

微信小程序开发文档 微信小程序 WeUI·导航组件

Navigation

示例代码：

属性列表

Slot

Tabbar

示例代码：

属性列表

微信小程序开发文档微信小程序 WeUI·导航组件