日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

Navigation

Navigation是小程序的頂部導(dǎo)航組件，當頁面配置navigationStyle設(shè)置為custom的時候可以使用此組件替代原生導(dǎo)航欄。

專注于為中小企業(yè)提供成都網(wǎng)站制作、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)加格達奇免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上千多家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

示例代碼：

{
    "usingComponents": {
        "mp-navigation-bar": "../components/navigation-bar/navigation-bar"
    },
    "navigationStyle": "custom",
    "navigationBarTitleText": "UI組件庫"
}

    
        Navigation
        小程序自定義導(dǎo)航欄
    
    
        觸發(fā)loading
        修改文字顏色
        修改背景顏色
        顯示 / 隱藏
        設(shè)置顯示 / 隱藏opacity動畫
    

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		否	添加在組件內(nèi)部結(jié)構(gòu)的class，可用于修改組件內(nèi)部的樣式
title	string		否	導(dǎo)航標題，如果不提供，則名為center的slot有效
back	boolean	true	否	是否顯示返回按鈕，默認點擊按鈕會執(zhí)行navigateBack，如果為false，則名為left的slot有效
delta	number	1	否	當back為true的時候有效，表示navigateBack的delta參數(shù)
background	string	#f8f8f8	否	導(dǎo)航背景色
color	string		否	導(dǎo)航顏色
loading	boolean		否	是否顯示標題左側(cè)的loading
show	boolean		否	顯示隱藏導(dǎo)航，隱藏的時候navigation的高度占位還在
animated	boolean		否	顯示隱藏導(dǎo)航的時候是有opacity過渡動畫
bindback	eventhandler		否	在back為true時，點擊back按鈕觸發(fā)此事件，detail包含delta

Slot

名稱	描述
left	左側(cè)slot，在back按鈕位置顯示，當back為false的時候有效
center	標題slot，在標題位置顯示，當title為空的時候有效
right	在導(dǎo)航的右側(cè)顯示

---

Tabbar

Tabbar組件，也可以用來作為小程序的自定義Tabbar使用

示例代碼：

{
  "usingComponents": {
    "mp-tabbar": "../components/tabbar/tabbar"
  },
  "navigationBarTitleText": "UI組件庫"
}

    
        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)
    }
});

屬性列表

屬性	類型	默認值	必填	說明
ext-class	string		否	添加在組件內(nèi)部結(jié)構(gòu)的class，可用于修改組件內(nèi)部的樣式
list	array		否	Tabbar的項的數(shù)組，按照規(guī)范，至少要有2個Tabbar項
current	number	0	否	當前選中的Tabbar項的下標
bindchange	eventhandler		否	Tabbar項發(fā)生改成的時候觸發(fā)此事件，detail為{index, item}，index是Tabbar下標，item是對應(yīng)的Tabbar項的配置

list屬性是對象數(shù)組，每一項表示一個Tabbar項，其字段含義為

字段名	類型	默認值	必填	說明
text	string		是	Tabbar項的標題
iconPath	string		否	Tabbar項的icon圖片路徑，建議使用絕對路徑，相對路徑要相對于組件所在目錄的。
selectedIconPath	string		否	Tabbar項選中時的icon，建議使用絕對路徑，相對路徑要相對于組件所在目錄的。
badge	string		否	是否顯示Tabbar的右上角的Badge

本文題目：創(chuàng)新互聯(lián)小程序教程：微信小程序WeUI·導(dǎo)航組件
本文URL：http://www.dlmjj.cn/article/cddjsij.html