用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 實戰教程 查看內容

小程序導航欄之導航面板

Rolan 2020-4-2 00:55

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

導航面板

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

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

  • 支持自定義面板內容

示例代碼

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源碼

查看演示



鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 天天修改 來自: 掘金
河北20选5大星走势图