W3Cschool
恭喜您成為首批注冊(cè)用戶(hù)
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
Navigation是小程序的頂部導(dǎo)航組件,當(dāng)頁(yè)面配置navigationStyle設(shè)置為custom的時(shí)候可以使用此組件替代原生導(dǎo)航欄。
{
"usingComponents": {
"mp-navigation-bar": "../components/navigation-bar/navigation-bar"
},
"navigationStyle": "custom",
"navigationBarTitleText": "UI組件庫(kù)"
}
<mp-navigation-bar loading="{{loading}}" show="{{show}}" animated="{{animated}}" color="{{color}}" background="{{background}}" title="UI組件庫(kù)" 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動(dòng)畫(huà)</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
})
}
})
屬性 | 類(lèi)型 | 默認(rèn)值 | 必填 | 說(shuō)明 |
---|---|---|---|---|
ext-class | string | 否 | 添加在組件內(nèi)部結(jié)構(gòu)的class,可用于修改組件內(nèi)部的樣式 | |
title | string | 否 | 導(dǎo)航標(biāo)題,如果不提供,則名為center的slot有效 | |
back | boolean | true | 否 | 是否顯示返回按鈕,默認(rèn)點(diǎn)擊按鈕會(huì)執(zhí)行navigateBack,如果為false,則名為left的slot有效 |
delta | number | 1 | 否 | 當(dāng)back為true的時(shí)候有效,表示navigateBack的delta參數(shù) |
background | string | #f8f8f8 | 否 | 導(dǎo)航背景色 |
color | string | 否 | 導(dǎo)航顏色 | |
loading | boolean | 否 | 是否顯示標(biāo)題左側(cè)的loading | |
show | boolean | 否 | 顯示隱藏導(dǎo)航,隱藏的時(shí)候navigation的高度占位還在 | |
animated | boolean | 否 | 顯示隱藏導(dǎo)航的時(shí)候是有opacity過(guò)渡動(dòng)畫(huà) | |
bindback | eventhandler | 否 | 在back為true時(shí),點(diǎn)擊back按鈕觸發(fā)此事件,detail包含delta |
名稱(chēng) | 描述 |
---|---|
left | 左側(cè)slot,在back按鈕位置顯示,當(dāng)back為false的時(shí)候有效 |
center | 標(biāo)題slot,在標(biāo)題位置顯示,當(dāng)title為空的時(shí)候有效 |
right | 在導(dǎo)航的右側(cè)顯示 |
Tabbar組件,也可以用來(lái)作為小程序的自定義Tabbar使用
{
"usingComponents": {
"mp-tabbar": "../components/tabbar/tabbar"
},
"navigationBarTitleText": "UI組件庫(kù)"
}
<view class="page">
<view class="page__hd">
<view class="page__title">Tabbar</view>
<view class="page__desc">類(lèi)似小程序原生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": "對(duì)話(huà)",
"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)
}
});
屬性 | 類(lèi)型 | 默認(rèn)值 | 必填 | 說(shuō)明 |
---|---|---|---|---|
ext-class | string | 否 | 添加在組件內(nèi)部結(jié)構(gòu)的class,可用于修改組件內(nèi)部的樣式 | |
list | array<object> | 否 | Tabbar的項(xiàng)的數(shù)組,按照規(guī)范,至少要有2個(gè)Tabbar項(xiàng) | |
current | number | 0 | 否 | 當(dāng)前選中的Tabbar項(xiàng)的下標(biāo) |
bindchange | eventhandler | 否 | Tabbar項(xiàng)發(fā)生改成的時(shí)候觸發(fā)此事件,detail為{index, item},index是Tabbar下標(biāo),item是對(duì)應(yīng)的Tabbar項(xiàng)的配置 |
list屬性是對(duì)象數(shù)組,每一項(xiàng)表示一個(gè)Tabbar項(xiàng),其字段含義為
字段名 | 類(lèi)型 | 默認(rèn)值 | 必填 | 說(shuō)明 |
---|---|---|---|---|
text | string | 是 | Tabbar項(xiàng)的標(biāo)題 | |
iconPath | string | 否 | Tabbar項(xiàng)的icon圖片路徑,建議使用絕對(duì)路徑,相對(duì)路徑要相對(duì)于組件所在目錄的。 | |
selectedIconPath | string | 否 | Tabbar項(xiàng)選中時(shí)的icon,建議使用絕對(duì)路徑,相對(duì)路徑要相對(duì)于組件所在目錄的。 | |
badge | string | 否 | 是否顯示Tabbar的右上角的Badge |
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話(huà):173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: