小程序之实现主页的tab选项功能的方法

这篇文章主要介绍了关于小程序之实现主页的tab选项功能的方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

效果图:

小程序之实现主页的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"
      }
    ]
  }

四、单独页面的配置

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

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

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

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

小程序之实现主页的tab选项功能的方法

    官方文档

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

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

   小程序之实现主页的tab选项功能的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服![email protected] QQ276087365
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!

立业阁 微信小程序教程 小程序之实现主页的tab选项功能的方法 https://www.liyege.cn/xcxzsxzydtxxgndff.html

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整, 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘
查看详情

相关文章