小程序导航栏之导航面板

最新推荐文章于 2024-04-17 20:59:53 发布

kkndyyrolf

最新推荐文章于 2024-04-17 20:59:53 发布

阅读量279

点赞数

分类专栏：小程序 javascript 文章标签：小程序

本文链接：https://blog.csdn.net/kkndyyrolf/article/details/106741067

版权

本文介绍了小程序中导航面板的使用，它作为导航栏的扩展，用于展示更多内容入口。内容包括导航面板的配置说明、示例代码、如何设置回调函数、如何获取实例以及各种内容的设置方法，如文本、列表、文档和图文。同时提供了GITHUB源码供参考。

摘要由CSDN通过智能技术生成

导航面板

导航系统起着组织内容和功能的作用，让它们按照产品的信息架构图进行连接，展现在在用户面前，导航将零散的内容和功能组织成了一个完成的有结构的系统，有时我们需要把更多的内容放置在导航栏的位置，因此需要一个导航面板

导航面板是导航栏的一个扩展，从导航栏部分拖拽出导航面板，展示更多的入口
在这里插入图片描述

支持自定义面板内容

示例代码

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%' // 默认导航板打开高度
    }