微信小程序实现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 相关文章推荐
InnerHtml和InnerText的区别分析
Mar 13 Javascript
jQuery 树形结构的选择器
Feb 15 Javascript
js 字符串转化成数字的代码
Jun 29 Javascript
javascript模拟实现C# String.format函数功能代码
Nov 25 Javascript
JavaScript动态插入CSS的方法
Dec 10 Javascript
jQuery实现的自动加载页面功能示例
Sep 04 Javascript
小程序红包雨的实现示例
Feb 19 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
Feb 21 Javascript
微信小程序wepy框架学习和使用心得详解
May 24 Javascript
javascript实现倒计时效果
Feb 17 Javascript
uni-app如何页面传参数的几种方法总结
Apr 28 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
Sep 01 Javascript
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
深入PHP运行环境配置的详解
2013/06/04 PHP
PHP面向对象教程之自定义类
2014/06/10 PHP
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
JS链式调用的实现方法
2013/03/07 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
2016/04/30 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
javascript history对象详解
2017/02/09 Javascript
深入浅析Vue不同场景下组件间的数据交流
2017/08/15 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
vue实现图片裁剪后上传
2020/12/16 Vue.js
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
Foreo国际站:Foreo International
2018/10/29 全球购物
皇家阿尔伯特英国官方商店:Royal Albert骨瓷
2019/03/25 全球购物
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
硕士研究生个人求职信
2013/12/04 职场文书
大学生自我鉴定书
2014/03/24 职场文书
机械系毕业生求职信
2014/05/28 职场文书
奥运会口号
2014/06/13 职场文书
个人工作表现评价材料
2014/09/21 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript
JS如何使用剪贴板操作Clipboard API
2021/05/17 Javascript