微信小程序实现topBar底部选择栏效果


Posted in Javascript onJuly 20, 2018

本文实例为大家分享了微信小程序实现topBar底部选择栏的具体代码,供大家参考,具体内容如下

先看一下效果:底部分为三个页面,点击不同的选项就会跳转到相对应的页面去。

 微信小程序实现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 相关文章推荐
JavaScript CSS 修改学习第四章 透明度设置
Feb 19 Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
Apr 29 Javascript
javascript实现随机显示星星特效
Jan 28 Javascript
无循环 JavaScript(map、reduce、filter和find)
Apr 08 Javascript
详解Node.js项目APM监控之New Relic
May 12 Javascript
Vue 滚动行为的具体使用方法
Sep 13 Javascript
security.js实现的RSA加密功能示例
Jun 06 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
Nov 02 Javascript
原生JS实现图片懒加载之页面性能优化
Apr 26 Javascript
用Vue.js方法创建模板并使用多个模板合成
Jun 28 Javascript
Vue实现计算器计算效果
Aug 17 Javascript
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
JS+H5 Canvas实现时钟效果
Jul 20 #Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 #Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 #Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 #Javascript
详解vue-cli官方脚手架配置
Jul 20 #Javascript
Vue中的异步组件函数实现代码
Jul 20 #Javascript
vue 中的keep-alive实例代码
Jul 20 #Javascript
You might like
解决中英文字符串长度问题函数
2007/01/16 PHP
php+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
php实现的生成排列算法示例
2019/07/25 PHP
php创建类并调用的实例方法
2019/09/25 PHP
js判断样式className同时增加class或删除class
2013/01/30 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
javascript的动态加载、缓存、更新以及复用(一)
2014/06/09 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
Python flask框架post接口调用示例
2019/07/03 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
程序员经常用到的UNIX命令
2015/04/13 面试题
营销与策划专业毕业生求职信
2013/11/01 职场文书
关于期中考试的反思
2014/02/02 职场文书
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
传承焦裕禄精神思想汇报2014
2014/09/10 职场文书
连锁超市项目计划书
2014/09/15 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
文明班级申报材料
2014/12/24 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书
留学文书中的个人陈述,应该注意哪些问题?
2019/08/23 职场文书
Python基本知识点总结
2022/04/07 Python