微信小程序实现topBar底部选择栏效果
时间:2018-07-20
这篇文章主要为大家详细介绍了微信小程序实现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 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- mybatis框架org.apache.ibatis.exceptions.PersistenceException:
- Spring源码学习笔记(3)——容器的功能扩展
- Dart数组的常规操作
- 机器学习之logistic回归算法与代码实现原理
- spring整合中application.xml配置
- RocketMQ详解(10)——Consumer详解
- RocketMQ详解(12)——RocketMQ的重试机制
- RocketMQ详解(13)——RocketMQ的消息模式
- 深度学习之卷积神经网络(CNN)详解与代码实现(一)
- Dart自定义类、构造函数
- Dart类中static静态成员及访问
- Dart中..级联操作
- Dart类的继承
- Dart导入自定义库,系统内置库,第三方库
- 国密SSL协议之C语言编程