微信小程序项目实践之主页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实现的图片在各种分辨率下未知的容器内上下左右居中
May 11 Javascript
javascript随机之洗牌算法深入分析
Jun 07 Javascript
微信支付 JS API支付接口详解
Jul 11 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
浅谈super-vuex使用体验
Jun 25 Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 Javascript
微信小程序实现保存图片到相册功能
Nov 30 Javascript
全面了解JavaScript的作用域链
Apr 03 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 Javascript
vue-cli3中配置alias和打包加hash值操作
Sep 04 Javascript
JavaScript实现简单的音乐播放器
Aug 14 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缓存技术详细总结
2013/08/07 PHP
php下Memcached入门实例解析
2015/01/05 PHP
Yii2框架dropDownList下拉菜单用法实例分析
2016/07/18 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
2012/02/07 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
js+canvas实现两张图片合并成一张图片的方法
2019/11/01 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
Javascript数组及类数组相关原理详解
2020/10/29 Javascript
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
Win8下python3.5.1安装教程
2020/07/29 Python
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
详解css3 Transition属性(平滑过渡菜单栏案例)
2017/09/05 HTML / CSS
后勤副校长自我鉴定
2013/10/13 职场文书
办理护照介绍信
2014/01/16 职场文书
大学生职业规划书的范本
2014/02/18 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
娱乐节目策划方案
2014/06/10 职场文书
春节慰问信范文
2015/02/15 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书