阅读(2281)
赞(0)
微信小程序 WeUI·导航组件
2020-07-27 14:51:33 更新
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>
<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
})
}
})
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>
<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)
}
});
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 |