微信小程序搭建tabbar

最新推荐文章于 2024-07-25 08:15:00 发布

目羲

最新推荐文章于 2024-07-25 08:15:00 发布

阅读量5.8k

点赞数 1

分类专栏：微信小程序开发

本文链接：https://blog.csdn.net/qq_45667304/article/details/124573785

版权

微信小程序小程序

微信小程序开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.首先在微信小程序文件夹中新建一个文件夹icons，将在tabbar中需要出现的图片都放在icons中（包括点击前以及点击后）
在这里插入图片描述

2.在app.wxss的文件中window下方写出tab

在这里插入图片描述

第一个指的是页面路径，必须在pages中先定义出来

第二个指的是tab上的按钮文字

第三个指的是图片路径

第四个指的是选中时的图片路径

例：

"tabBar": {

"list": [{

"pagePath": "pages/index/index",

"text": "首页",

"iconPath": "icons/home.png",

"selectedIconPath": "icons/home-o.png"

},

{

"pagePath": "pages/navigat/index",

"text": "导航",

"iconPath": "icons/navigat.png",

"selectedIconPath": "icons/navigat-o.png"

},

{

"pagePath": "pages/cart/index",

"text": "购物车",

"iconPath": "icons/cart.png",

"selectedIconPath": "icons/cart-o.png"

},

{

"pagePath": "pages/user/index",

"text": "我的",

"iconPath": "icons/user.png",

"selectedIconPath": "icons/user-o.png"

}

]

},