小程序底部导航怎么加

精选简答
可使用「Tabbar组件」或自写代码布局设计。前者配置JSON即可(配置小程序根目录下的 app.json 文件,增加tabBar配置),样式较为统一;后者更为灵活,但技术要求略高,使用布局标签(view)+样式(css)+JS进行设计开发。

回答

VIE
程序开发/运营

可使用「Tabbar组件」或自写代码布局设计。前者配置JSON即可,样式较为统一;后者更为灵活,但技术要求略高。

一、Tabbar组件

配置小程序根目录下的 app.json 文件,增加tabBar配置:

{
  /**
   JSON结构其他代码省略,仅示范TabBar代码
  */
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  }
}

这个配置只在有pagePath路径的页面显示,更多配置内容可查看官方文档深入学习。

二、自写代码布局设计

原理:使用布局标签(view)+样式(css)+JS进行设计开发。其中可使用position: fixed悬浮,bottom: 0贴近底部。采用navigator导航跳转或JS点击事件实现路由跳转(API:switchTab、navigateTo等)。

更新时间:2020-03-28 23:42:29
相关标签链接: