微信小程序:topBar底部选择栏
2018-01-29 13:17
323 查看
先看一下效果:底部分为三个页面,点击不同的选项就会跳转到相对应的页面去。
下面是文件夹的结构
这个分为三个页面,分别是 index,dujia,Info
下面是代码:
app.json
其他的页面都写在对应文件夹的.wxml文件里面。.wxml文件就想当于我们网页设计中的 html一样。
例如我的index页面:
下面是文件夹的结构
这个分为三个页面,分别是 index,dujia,Info
下面是代码:
app.json
{ "pages": [//有几个页面,pages里面就要绑定几个 "pages/dujia/dujia", "pages/index/index", "pages/info/info" ], "window": { "backgroundTextStyle": "dark", "navigationBarBackgroundColor": "#DF3031", "navigationBarTitleText": "topBar练习", "navigationBarTextStyle": "white" }, "tabBar": { "color": "#000000", "selectedColor": "#DF3031", "list": [ { "pagePath": "pages/index/index", "text": "第一页", "iconPath": "images/1.png", "selectedIconPath": "images/1.png" }, { "pagePath": "pages/dujia/dujia", "text": "第二页", "iconPath": "images/2.png", "selectedIconPath": "images/2.png" }, { "pagePath": "pages/info/info", "text": "第三页", "iconPath": "images/3.jpg", "selectedIconPath": "images/3.jpg" } ] } }
其他的页面都写在对应文件夹的.wxml文件里面。.wxml文件就想当于我们网页设计中的 html一样。
例如我的index页面:
<view> 第一页 </view>
相关文章推荐
- 微信小程序实现topBar底部选择栏效果
- 微信小程序仿美团城市选择
- 微信小程序三级联动选择器使用方法
- 微信小程序tabBar底部导航栏菜单详细介绍
- 微信小程序实现根据字母选择城市功能
- 微信小程序四(设置底部导航)
- 微信小程序开发之选项卡(窗口底部TabBar)页面切换
- Android RadioGroup+ViewPager+ActionBar实现仿微信6.0界面(底部滑动菜单栏+导航栏)
- 转:【微信小程序】 微信小程序-拍照或选择图片并上传文件
- 微信小程序商品详情页的底部弹出框效果
- 微信小程序底部功能栏的实现代码
- 技术小白之记录微信小程序底部导航栏
- JS中微信小程序自定义底部弹出框
- 详解微信小程序设置底部导航栏目方法
- [微信小程序]滚动选择器
- 微信小程序商品详情页规格属性选择示例代码
- 微信小程序实战之仿android fragment可滑动底部导航栏(4)
- 微信小程序picker-view日期选择器
- 微信小程序使用picker实现时间和日期选择框功能【附源码下载】
- 微信小程序底部tabbar不显示问题