微信小程序项目实践之主页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 相关文章推荐
jQuery 源码分析笔记(6) jQuery.data
Jun 08 Javascript
jquery ajax例子返回值详解
Sep 11 Javascript
Jquery实现视频播放页面的关灯开灯效果
May 27 Javascript
AngularJS入门教程之控制器详解
Jul 27 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
JS利用cookies设置每隔24小时弹出框
Apr 20 Javascript
js实现京东轮播图效果
Jun 30 Javascript
JavaScript调用模式与this关键字绑定的关系
Apr 21 Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 Javascript
Vue组件基础用法详解
Feb 05 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 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
人族 Terran 基本策略
2020/03/14 星际争霸
php 生成饼图 三维饼图
2009/09/28 PHP
PHP小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
ThinkPHP3.1.2 使用cli命令行模式运行的方法
2020/04/14 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
用js实现in_array的方法
2013/11/05 Javascript
Javascript setInterval的两种调用方法(实例讲解)
2013/11/29 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
jQuery实现常见的隐藏与展示列表效果示例
2018/06/04 jQuery
微信小程序多音频播放进度条问题
2018/08/28 Javascript
浅谈vuex中store的命名空间
2019/11/08 Javascript
使用grappelli为django admin后台添加模板
2014/11/18 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
Pandas 数据处理,数据清洗详解
2018/07/10 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
django settings.py 配置文件及介绍
2019/07/15 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
艺术应用与设计个人的自我评价
2013/11/23 职场文书
服装厂厂长岗位职责
2013/12/27 职场文书
点菜员岗位职责范本
2014/02/14 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
企业年会祝酒词
2015/08/11 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
MySQL批量更新不同表中的数据
2022/05/11 MySQL
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android