微信小程序项目实践之主页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 相关文章推荐
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
用JavaScript实现单继承和多继承的简单方法
Mar 29 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
Javascript中设置默认参数值示例
Sep 11 Javascript
jquery.tableSort.js表格排序插件使用方法详解
Aug 12 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
微信小程序 input输入及动态设置按钮的实现
Oct 27 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
在Vue中获取自定义属性方法:data-id的实例
Sep 09 Javascript
如何通过Proxy实现JSBridge模块化封装
Oct 22 Javascript
vue实现移动端div拖动效果
Mar 03 Vue.js
详解性能更优越的小程序图片懒加载方式
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之第二天
2006/10/09 PHP
PHP 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
php获取淘宝分类id示例
2014/01/16 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
2009/03/21 Javascript
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
jQuery简易图片放大特效示例代码
2014/06/09 Javascript
JS的location.href跳出框架打开新页面的方法
2014/09/04 Javascript
jQuery选择器源码解读(七):elementMatcher函数
2015/03/31 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
2016/01/12 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
2017/02/04 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
bootstrap confirmation按钮提示组件使用详解
2017/08/22 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
python查找指定具有相同内容文件的方法
2015/06/28 Python
Python 制作糗事百科爬虫实例
2016/09/22 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
html svg生成环形进度条的实现方法
2019/09/23 HTML / CSS
Jo Malone美国官网:祖玛珑香水
2017/03/27 全球购物
英国假发网站:Hothair
2018/02/23 全球购物
自荐书范文范例
2014/02/13 职场文书
国贸专业的职业规划书
2014/03/15 职场文书
手术室护士长竞聘书
2014/03/31 职场文书
会计系毕业生求职信
2014/05/28 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
审美与表现自我评价
2015/03/09 职场文书
MySQL中的隐藏列的具体查看
2021/09/04 MySQL