微信小程序项目实践之主页tab选项实现


Posted in Javascript onJuly 18, 2018

官方文档

效果图:

微信小程序项目实践之主页tab选项实现

实现底部Tab选项,只需要在项目根目录下的app.json下修改

如图:

 微信小程序项目实践之主页tab选项实现

先介绍一下app.json文件

默认有两个代码块:

1、pages

这里注册了当前小程序的所有页面路径

2、window

这里用于设置小程序的状态栏、导航条、标题、窗口背景色。

以上两个详细使用参考文档,本文章不做介绍

  我们看下app.json提供的另一个配置项:tabBar

微信小程序项目实践之主页tab选项实现

   tabBar提供一些公有的属性对tab配置:

微信小程序项目实践之主页tab选项实现

  而针对每一个单独的tab 也有一些属性进行配置:

微信小程序项目实践之主页tab选项实现

     官方示意图:

微信小程序项目实践之主页tab选项实现

 具体实现底部Tab功能:

 设定一个需求,假设当前我们有两个tab,一个'主页',一个'我的' , 未选中灰黑色,选择红色。

 一、在pages目录下创建两个目录,并创建想要的js、json、wxml、wxss相关文件

       名字随意,这里举例:home目录(主页Tab相关),mine目录(我的Tab相关)

微信小程序项目实践之主页tab选项实现

二、在根目录下新建一个目录,取名images(随意取),用于存放图片,这里tab需要使用

1、在阿里素材库下载几个,注意tab图片需要下载点击和未点击两种状态下的图片。

       2、讲图片资源复制到自己建的用于存图片的目录下   

微信小程序项目实践之主页tab选项实现

三、app.json文件配置

      1、在pages属性中配置项目所有的页面路径,我们这个例子就两个,home,mine

"pages":[
  "pages/home/home",
  "pages/mine/mine"
 ]

    2、添加tabBar 属性 , 定义一些状态

            根据文章前面部分讲解,进行一些必要属性的配置

"tabBar":{
  "color": "#333333",
  "selectedColor": "#ff0000",
  "backgroundColor": "#fff",
  "list":[
   {
    "pagePath":"pages/home/home",
    "text":"主页",
    "iconPath":"images/home.png",
    "selectedIconPath":"images/home_selected.png"
    
   },
   {
    "pagePath":"pages/mine/mine",
    "text":"我的",
    "iconPath": "images/mine.png",
    "selectedIconPath":"images/mine_selected.png"
   }
  ]
 }
{
 "pages":[
 "pages/home/home",
 "pages/mine/mine"
 ],
 "window":{
 "backgroundTextStyle":"light",
 "navigationBarBackgroundColor": "#fff",
 "navigationBarTitleText": "WeChat",
 "navigationBarTextStyle":"black"
 },
 "tabBar":{
 "color": "#333333",
 "selectedColor": "#ff0000",
 "backgroundColor": "#fff",
 "list":[
  {
  "pagePath":"pages/home/home",
  "text":"主页",
  "iconPath":"images/home.png",
  "selectedIconPath":"images/home_selected.png"
  },
  {
  "pagePath":"pages/mine/mine",
  "text":"我的",
  "iconPath": "images/mine.png",
  "selectedIconPath":"images/mine_selected.png"
  }
 ]
 }
}

四、单独页面的配置

一个页面包含js、hson、wxml、wxss等相关文件。

      这里不再多具体介绍,只添加一个小需求,点击tab切换相关页面,该页面标题要和tab一致,页面内容也和tab一致,用于说明tab效果正确实现。

      1、设置单独页面的页面标题,这个需求是在json文件中配置实现的。

 主需要在单独页面路径下的json文件中添加属性:

微信小程序项目实践之主页tab选项实现

 

官方文档

     2、在页面中显示与tab一致的文字

   页面内容搭建(ui绘制代码)是在单独页面路径下的wxml文件中配置实现的。

微信小程序项目实践之主页tab选项实现

官方文档

总结

以上所述是小编给大家介绍的微信小程序项目实践之主页tab选项实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
如何让页面加载完成后执行js
Jun 26 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
js图片卷帘门导航菜单特效代码分享
Sep 10 Javascript
js性能优化技巧
Nov 29 Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 Javascript
javascript实现鼠标点击页面 移动DIV
Dec 02 Javascript
js实现百度搜索提示框
Feb 05 Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 Javascript
在vue组件中使用axios的方法
Mar 16 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 Javascript
详解性能更优越的小程序图片懒加载方式
Jul 18 #Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 #Javascript
微信小程序日期选择器实例代码
Jul 18 #Javascript
JavaScript实现的反序列化json字符串操作示例
Jul 18 #Javascript
Angularjs实现多图片上传预览功能
Jul 18 #Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 #Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 #Javascript
You might like
分页详解 从此分页无忧(PHP+mysql)
2007/11/23 PHP
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
php数组函数序列之array_slice() - 在数组中根据条件取出一段值,并返回
2011/11/07 PHP
php session的应用详细介绍
2017/03/22 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
<script defer> defer 是什么意思
2009/05/10 Javascript
Javascript学习笔记2 函数
2010/01/11 Javascript
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
json定义及jquery操作json的方法
2016/10/03 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
JS实现键值对遍历json数组功能示例
2018/05/30 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
2019/09/02 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
Python中的zip函数使用示例
2015/01/29 Python
python中常用检测字符串相关函数汇总
2015/04/15 Python
Python cx_freeze打包工具处理问题思路及解决办法
2016/02/13 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
python图像和办公文档处理总结
2019/05/28 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
python 实现Requests发送带cookies的请求
2021/02/08 Python
美国室内盆栽植物购买网站:Plants.com
2020/04/24 全球购物
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
Windows和Linux动态库应用异同
2016/04/17 面试题
会计专业自我评价
2014/02/12 职场文书
幼儿园小班班务总结
2015/08/03 职场文书