微信小程序开发之底部导航栏和自定义底部导航栏 |
您所在的位置：网站首页 › 微信导航软件叫什么 › 微信小程序开发之底部导航栏和自定义底部导航栏 |
微信小程序开发之底部导航栏和自定义底部导航栏
|
一、底部导航栏 第一步，打开app.json，在pages属性中添加底部tab页 "pages":[ "pages/index/index", "pages/user/user" ]第二步，添加tabBar属性进行配置 "tabBar": { "color": "#000000", //tab 上的文字默认颜色，仅支持十六进制颜色 "selectedColor": "#00BFFF", //tab 上的文字选中时的颜色，仅支持十六进制颜色 "backgroundColor": "#FFFFFF", //tab 的背景色，仅支持十六进制颜色 "borderStyle": "black", //tabbar 上边框的颜色， 仅支持 black / white "position": "bottom", //tabBar 的位置，仅支持 bottom / top "custom": false, //自定义tabBar "list": [ //tab 的列表，最少 2 个、最多 5 个 tab { "pagePath": "pages/index/index", //页面路径，必须在 pages 中先定义 "text": "首页", //tab 上按钮文字 "iconPath": "static/img/index.png", //图片路径，不支持网络图片，当 position 为 top 时，不显示 icon "selectedIconPath": "/static/img/selectedIndex.png" //选中时的图片路径，不支持网络图片，当 position 为 top 时，不显示 icon }, { "pagePath": "pages/user/user", "text": "个人中心", "iconPath": "static/img/user.png", "selectedIconPath": "/static/img/selectedUser.png" } ] }效果如下
二、自定义底部导航栏 第一步，打开app.json，在pages属性中添加一个首页和四个tab页 "pages":[ "pages/index/index", "pages/spring/spring", "pages/summer/summer", "pages/autumn/autumn", "pages/winter/winter" ]第二步，打开tab页的json文件，将四个tab页声明为组件 { "component": true, "usingComponents": {} }第三步，打开tab页的wxml文件，添加页面内容 第四步，在index.json中引用自定义组件 "usingComponents": { "spring": "/pages/spring/spring", "summer": "/pages/summer/summer", "autumn": "/pages/autumn/autumn", "winter": "/pages/winter/winter" }第五步，在index.wxml中使用组件，并设计底部导航栏 |
【本文地址】
今日新闻 |
推荐新闻 |