微信小程序项目实践之主页tab选项实现

站长资源 2024/11/26 佚名

9 1538 9

DDR爱好者之家 Design By 杰米

官方文档

效果图：

实现底部Tab选项，只需要在项目根目录下的app.json下修改

如图：

先介绍一下app.json文件

默认有两个代码块：

1、pages

这里注册了当前小程序的所有页面路径

2、window

这里用于设置小程序的状态栏、导航条、标题、窗口背景色。

以上两个详细使用参考文档，本文章不做介绍

我们看下app.json提供的另一个配置项：tabBar

tabBar提供一些公有的属性对tab配置：

　而针对每一个单独的tab 也有一些属性进行配置：

官方示意图：

具体实现底部Tab功能：

设定一个需求，假设当前我们有两个tab,一个'主页'，一个'我的' ，未选中灰黑色，选择红色。

一、在pages目录下创建两个目录，并创建想要的js、json、wxml、wxss相关文件

名字随意，这里举例：home目录（主页Tab相关），mine目录(我的Tab相关)

二、在根目录下新建一个目录，取名images(随意取)，用于存放图片，这里tab需要使用

　　1、在阿里素材库下载几个，注意tab图片需要下载点击和未点击两种状态下的图片。

2、讲图片资源复制到自己建的用于存图片的目录下

三、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文件中添加属性：

　　　　官方文档

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

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

　　　　官方文档

总结

以上所述是小编给大家介绍的微信小程序项目实践之主页tab选项实现，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

微信小程序tab,主页tab选项

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“微信小程序项目实践之主页tab选项实现”

暂无评论...

微信小程序项目实践之主页tab选项实现

微信小程序实践之动态控制组件的显示/隐藏功能

详解性能更优越的小程序图片懒加载方式

评论“微信小程序项目实践之主页tab选项实现”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接