微信小程序实现topBar底部选择栏效果
更新时间：2018年07月20日 10:24:00 作者：RataYou
这篇文章主要为大家详细介绍了微信小程序实现topBar底部选择栏效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现topBar底部选择栏的具体代码，供大家参考，具体内容如下
先看一下效果：底部分为三个页面，点击不同的选项就会跳转到相对应的页面去。
下面是文件夹的结构
这个分为三个页面，分别是 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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本章主要介绍通过JavaScript读取图片的例子，本例子不包含服务器端后台代码，只包含前台页面代码，所以直接用Html文件就可以，代码如下，因为包含详细的注意，所以不再详细说明了，如果有看不明白的，可以给我留言，我给大家具体答复。2009-11-11
下面小编就为大家带来一篇JS实现图片的不间断连续滚动的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
本文主要介绍了JavaScript实现弹窗效果的代码分析，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
这篇文章主要介绍了JavaScript中的值类型转换介绍,本文讲解了值类型转换规则、值类型转换与比较、显式类型转换、对类型自动转换的使用等内容,需要的朋友可以参考下2014-12-12
这篇文章主要为大家介绍了学习JavaScript事件流和事件处理程序的注意事项，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要为大家详细介绍了JavaScript实现消息框示例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
下面介绍JavaScript中的数组对象遍历、读写、排序等操作以及与数组相关的字符串处理操作，需要的的朋友参考下吧2017-09-09
这篇文章主要介绍了JavaScript通过字符串调用函数的实现方法,实例分析了javascript动态调用函数的技巧,需要的朋友可以参考下2015-03-03
这篇文章主要为大家详细介绍了如何利用JavaScript实现图片局部放大镜效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2023-12-12
这篇文章主要为大家详细介绍了JavaScript实现简单验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
最新评论