小程序自定义带凹的tabbar

最新推荐文章于 2024-11-18 11:15:02 发布

hchcv

最新推荐文章于 2024-11-18 11:15:02 发布

阅读量2k

点赞数 3

CC 4.0 BY-SA版权

文章标签： javascript 小程序 css

本文链接：https://blog.youkuaiyun.com/protreshel/article/details/118389009

本文介绍如何在小程序中实现自定义TabBar，包括配置app.json、编写wxml、wxss和js代码，以及如何根据不同页面切换TabBar样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、在app.json文件找到“tarBar”对象，然后添加一个属性，代码如下：

"tabBar": {
    "custom": true, //是否自定义
    "color": "#000000",
    "selectedColor": "#fec248",
    "backgroundColor": "#ffffff",
    "list": [{
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/catetory/index",
        "text": "门禁"
      },
      {
        "pagePath": "pages/my/index",
        "text": "我的"
      }
    ]
  },

2、在pages文件夹同级目录下，新建一个文件夹，文件夹名称为 “custom-tab-bar” ，个人认为创建时生成component，

3、wxhl,wxss,js等自己动手丰衣足食

想要我自己写，不可能，不可能，绝对不可能！

wxml代码

<view class="tab-bar-container">
  <view class="tab-bar">
    <view wx:for="{
  
  {list}}" wx:key="index" class="tab-bar-item" data-path=" 
    {
  
  {item.page