建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
創(chuàng)新互聯(lián)小程序教程：微信小程序WeUI·導(dǎo)航組件
Navigation
Navigation是小程序的頂部導(dǎo)航組件，當(dāng)頁面配置navigationStyle設(shè)置為custom的時(shí)候可以使用此組件替代原生導(dǎo)航欄。
專注于為中小企業(yè)提供成都網(wǎng)站制作、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)加格達(dá)奇免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千多家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
示例代碼：
{
"usingComponents": {
"mp-navigation-bar": "../components/navigation-bar/navigation-bar"
},
"navigationStyle": "custom",
"navigationBarTitleText": "UI組件庫"
}
Navigation
小程序自定義導(dǎo)航欄
Navigation
小程序自定義導(dǎo)航欄
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
})
}
})屬性列表
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 |
|---|---|---|---|---|
| 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過渡動(dòng)畫 | |
| bindback | eventhandler | 否 | 在back為true時(shí)，點(diǎn)擊back按鈕觸發(fā)此事件，detail包含delta |
Slot
| 名稱 | 描述 |
|---|---|
| left | 左側(cè)slot，在back按鈕位置顯示，當(dāng)back為false的時(shí)候有效 |
| center | 標(biāo)題slot，在標(biāo)題位置顯示，當(dāng)title為空的時(shí)候有效 |
| right | 在導(dǎo)航的右側(cè)顯示 |
Tabbar
Tabbar組件，也可以用來作為小程序的自定義Tabbar使用
示例代碼：
{
"usingComponents": {
"mp-tabbar": "../components/tabbar/tabbar"
},
"navigationBarTitleText": "UI組件庫"
}
Tabbar
類似小程序原生tabbar的組件，可用于自定義tabbar
Tabbar
類似小程序原生tabbar的組件，可用于自定義tabbar
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)
}
});
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)
}
});屬性列表
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 |
|---|---|---|---|---|
| ext-class | string | 否 | 添加在組件內(nèi)部結(jié)構(gòu)的class，可用于修改組件內(nèi)部的樣式 | |
| list | array | 否 | 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是對應(yīng)的Tabbar項(xiàng)的配置 |
list屬性是對象數(shù)組，每一項(xiàng)表示一個(gè)Tabbar項(xiàng)，其字段含義為
| 字段名 | 類型 | 默認(rèn)值 | 必填 | 說明 |
|---|---|---|---|---|
| text | string | 是 | Tabbar項(xiàng)的標(biāo)題 | |
| iconPath | string | 否 | Tabbar項(xiàng)的icon圖片路徑，建議使用絕對路徑，相對路徑要相對于組件所在目錄的。 | |
| selectedIconPath | string | 否 | Tabbar項(xiàng)選中時(shí)的icon，建議使用絕對路徑，相對路徑要相對于組件所在目錄的。 | |
| badge | string | 否 | 是否顯示Tabbar的右上角的Badge |
網(wǎng)站標(biāo)題：創(chuàng)新互聯(lián)小程序教程：微信小程序WeUI·導(dǎo)航組件
文章來源：http://fisionsoft.com.cn/article/cddjsij.html
