導航面板

導航系統起著組織內容和功能的作用，讓它們按照產品的信息架構圖進行連接，展現在在用戶面前，導航將零散的內容和功能組織成了一個完成的有結構的系統，有時我們需要把更多的內容放置在導航欄的位置，因此需要一個導航面板

導航面板是導航欄的一個擴展，從導航欄部分拖拽出導航面板，展示更多的入口

• 支持自定義面板內容

---

示例代碼

https://github.com/webkixi/aotoo-xquery  
=> pages/navpad  
復制代碼

配置說明

const Pager = require('../../components/aotoo/core/index')
const mkNavpad = require('../../components/modules/navpad')
Pager({
  data: {
    navPadConfig: mkNavpad({
      id: '',
      bindopen: null,
      bindclose: null,
      content: null,
      navpadHeight: '90%', // 默認導航板高度
      navpadTop: '85%', // 默認導航板初始位置
      navpadOpen: '-80%' // 默認導航板打開高度
    }),
  }
})
復制代碼

id
{Array} 配置實例的Id

bindopen
{Function} 彈開導航面板時的回調方法

bindclose
{Function} 關閉導航面板時的回調方法

content
{Array} 設置導航面板的內容

navpadHeight
{String} 設置導航面板的高度，默認為全屏90%

navpadTop
{String} 設置導航面板的默認位置, 默認為85%

navpadOpen
{String} 設置導航面板打開時的占整屏高度, 默認為80%

如何設置

設置回調函數

navPadConfig: mkNavpad({
  bindopen: function(){
    // 導航欄面板彈開時響應
  },
  bindclose: function(){
    // 導航欄面板關閉時響應
  },
  navpadHeight: '90%', // 默認導航板高度
  navpadTop: '85%', // 默認導航板初始位置
  navpadOpen: '-80%' // 默認導航板打開高度
}),
復制代碼

如何獲得實例

Pager({
  data: {
    navPadConfig: mkNavpad({
      id: 'idName',
    }),
  },
  onReady(){
    let that = this[idName]
  }
})  
復制代碼

使用實例插入數據

Pager({
  data: {
    navPadConfig: mkNavpad({
      id: 'idName',
    }),
  },
  onReady(){
    let that = this[idName]
    // 插入一條數據
    that.innerContent({ title: '好好學習，天天向上' })  

    // 插入數組  
    that.innerContent([
      { title: '好好學習' },
      { title: '天天向上' },
    ])  
    
    // 追加數據  
    that.appendContent([
      { title: '好好學習' },
      { title: '天天向上' },
    ]) 
  }
})
復制代碼

設置文本內容

mkNavpad({ content: [
  '好好學習',
  '天天向上'
]})
復制代碼

設置列表

mkNavpad({ content: [
  {title: '好好學習', itemClass: 'xuexi'},
  {title: '天天向上', itemClass: 'xiangshang'},
  {img: {src: 'path/to/img', itemClass: 'img-class'}},
]})
復制代碼

設置文檔

mkNavpad({ 
  content: [
    {"@md": `markdown的文本內容`}
  ]
})
復制代碼

設置復雜的圖文

mkNavpad({
  content: [
    {
      img: {src: 'path/to/image'},
      "@md": `文檔描述內容`
    },
  ]
})
復制代碼

GITHUB源碼

查看演示