微信小程序项目实践之主页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 相关文章推荐
Js的MessageBox
Dec 03 Javascript
基于jquery的网页SELECT下拉框美化代码
Oct 28 Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 Javascript
JQuery给元素添加/删除节点比如select
Apr 02 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
Feb 05 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
Oct 31 Javascript
对于js垃圾回收机制的理解
Sep 14 Javascript
jQuery Dom元素操作技巧
Feb 04 jQuery
在layui框架中select下拉框监听更改事件的例子
Sep 20 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
Aug 12 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
法压式咖啡之制作法
2021/03/03 冲泡冲煮
PHP中图片等比缩放的实例
2013/03/24 PHP
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
php支付宝接口用法分析
2015/01/04 PHP
escape、encodeURI 和 encodeURIComponent 的区别
2009/03/02 Javascript
浅析javascript闭包 实例分析
2010/12/25 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
2011/01/17 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
常用jQuery选择器总结
2014/07/11 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
2017/05/17 Javascript
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
2019/01/17 Javascript
使用element-ui table expand展开行实现手风琴效果
2019/03/15 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
[59:35]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第一场 1月8日
2021/03/11 DOTA
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
Python中的装饰器用法详解
2015/01/14 Python
Python3写入文件常用方法实例分析
2015/05/22 Python
Python中Threading用法详解
2017/12/27 Python
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
Python实现合并两个列表的方法分析
2018/05/28 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
python实现在遍历列表时,直接对dict元素增加字段的方法
2019/01/15 Python
matplotlib实现区域颜色填充
2019/03/18 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
孝敬父母的活动方案
2014/08/31 职场文书
回复函格式及范文
2015/07/14 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书