導(dǎo)航面板

導(dǎo)航系統(tǒng)起著組織內(nèi)容和功能的作用，讓它們按照產(chǎn)品的信息架構(gòu)圖進(jìn)行連接，展現(xiàn)在在用戶(hù)面前，導(dǎo)航將零散的內(nèi)容和功能組織成了一個(gè)完成的有結(jié)構(gòu)的系統(tǒng)，有時(shí)我們需要把更多的內(nèi)容放置在導(dǎo)航欄的位置，因此需要一個(gè)導(dǎo)航面板

導(dǎo)航面板是導(dǎo)航欄的一個(gè)擴(kuò)展，從導(dǎo)航欄部分拖拽出導(dǎo)航面板，展示更多的入口

• 支持自定義面板內(nèi)容

---

示例代碼

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

配置說(shuō)明

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%', // 默認(rèn)導(dǎo)航板高度
      navpadTop: '85%', // 默認(rèn)導(dǎo)航板初始位置
      navpadOpen: '-80%' // 默認(rèn)導(dǎo)航板打開(kāi)高度
    }),
  }
})
復(fù)制代碼

id
{Array} 配置實(shí)例的Id

bindopen
{Function} 彈開(kāi)導(dǎo)航面板時(shí)的回調(diào)方法

bindclose
{Function} 關(guān)閉導(dǎo)航面板時(shí)的回調(diào)方法

content
{Array} 設(shè)置導(dǎo)航面板的內(nèi)容

navpadHeight
{String} 設(shè)置導(dǎo)航面板的高度，默認(rèn)為全屏90%

navpadTop
{String} 設(shè)置導(dǎo)航面板的默認(rèn)位置, 默認(rèn)為85%

navpadOpen
{String} 設(shè)置導(dǎo)航面板打開(kāi)時(shí)的占整屏高度, 默認(rèn)為80%

如何設(shè)置

設(shè)置回調(diào)函數(shù)

navPadConfig: mkNavpad({
  bindopen: function(){
    // 導(dǎo)航欄面板彈開(kāi)時(shí)響應(yīng)
  },
  bindclose: function(){
    // 導(dǎo)航欄面板關(guān)閉時(shí)響應(yīng)
  },
  navpadHeight: '90%', // 默認(rèn)導(dǎo)航板高度
  navpadTop: '85%', // 默認(rèn)導(dǎo)航板初始位置
  navpadOpen: '-80%' // 默認(rèn)導(dǎo)航板打開(kāi)高度
}),
復(fù)制代碼

如何獲得實(shí)例

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

使用實(shí)例插入數(shù)據(jù)

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

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

設(shè)置文本內(nèi)容

mkNavpad({ content: [
  '好好學(xué)習(xí)',
  '天天向上'
]})
復(fù)制代碼

設(shè)置列表

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

設(shè)置文檔

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

設(shè)置復(fù)雜的圖文

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

GITHUB源碼

查看演示