小程序自定义底部tabbar,并且解决遮罩层无法遮挡住底部tabbar问题

一、根目录下新建文件夹

二、index.wxml

javascript 复制代码
<view>
  <van-tabbar active="{{ active }}" active-color="#f2be8f" bind:change="onChange">
    <van-tabbar-item wx:for="{{list}}" wx:key="index" info="{{item.info? item.info:''}}">
      <image slot="icon" src="{{item.iconPath}}" mode="aspectFit" style="width: 50rpx;height: 50rpx;"/>
      <image slot="icon-active" src="{{item.selectedIconPath}}" mode="aspectFit" style="width: 50rpx;height: 50rpx;"/>
      {{item.text}}
    </van-tabbar-item>
  </van-tabbar>
</view>

三、index.json

javascript 复制代码
{
  "component": true,
  "usingComponents": {
    "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index"
  }
}

四、index.js

javascript 复制代码
// custom-tab-bar/index.js
import {
  menuData
} from './data'
Component({
  /**
   * 组件的属性列表
   */
  options: {
    // 开启这个才可以修改vant组件里面的样式
    styleIsolation: 'shared'
  },
  properties: {

  },
  /**
   * 组件的初始数据
   */
  data: {
    active: null,
    list: menuData
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 切换tabbar页面
    onChange(event) {
      this.setData({
        active:event.detail
      })
      wx.switchTab({
        url: this.data.list[event.detail].pagePath,
      })
    }
  }
})

五、data.js

javascript 复制代码
export const menuData = [{
    "pagePath": "/pages/index/index",
    "text": "首页",
    "iconPath": "/assets/images/tabbar/index.png",
    "selectedIconPath": '/assets/images/tabbar/index-select.png'
  },
  {
    "pagePath": "/pages/order/order",
    "text": "点单",
    "iconPath": "/assets/images/tabbar/order.png",
    "selectedIconPath": '/assets/images/tabbar/order-select.png'
  },
  {
    "pagePath": "/pages/record/record",
    "text": "订单",
    "iconPath": "/assets/images/tabbar/record.png",
    "selectedIconPath": '/assets/images/tabbar/record-select.png'
  },
  {
    "pagePath": "/pages/my/my",
    "text": "我的",
    "iconPath": "/assets/images/tabbar/my.png",
    "selectedIconPath": '/assets/images/tabbar/my-select.png'
  }
]

六、app.json

javascript 复制代码
"tabBar": {
    "custom": true, // 重点,其他的该怎么写怎么写,表示开启自定义tabbar
    "color": "#666666",
    "selectedColor": "#FF5F15",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "assets/images/tabbar/index.png",
        "selectedIconPath": "assets/images/tabbar/index-select.png"
      },
      {
        "pagePath": "pages/order/order",
        "text": "点单",
        "iconPath": "assets/images/tabbar/order.png",
        "selectedIconPath": "assets/images/tabbar/order-select.png"
      },
      {
        "pagePath": "pages/record/record",
        "text": "订单",
        "iconPath": "assets/images/tabbar/record.png",
        "selectedIconPath": "assets/images/tabbar/record-select.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "assets/images/tabbar/my.png",
        "selectedIconPath": "assets/images/tabbar/my-select.png"
      }
    ]
  },

为什么遮挡不住底部tabbar!!!

给弹出层设置z-index大于99999就可以了。

相关推荐
老华带你飞28 分钟前
口腔助手|口腔挂号预约小程序|基于微信小程序的口腔门诊预约系统的设计与实现(源码+数据库+文档)
java·数据库·微信小程序·小程序·论文·毕设·口腔小程序
尸僵打怪兽32 分钟前
HBuilder X打包发布微信小程序
微信小程序·小程序·打包·hbuilder x
中游鱼1 小时前
如何序列化和反序列化动态 XmlElement ?
windows·microsoft·c#
我命由我123456 小时前
Kotlin 数据容器 - List(List 概述、创建 List、List 核心特性、List 元素访问、List 遍历)
java·开发语言·jvm·windows·java-ee·kotlin·list
mCell8 小时前
从删库到跑路?这50个Linux命令能保你职业生涯
linux·windows·macos
dualven_in_csdn8 小时前
electron 使用记录
windows
zz96022610 小时前
Windows Server存储池,虚拟磁盘在系统启动后不自动连接需要手动连接
windows
说私域11 小时前
公域流量向私域流量转化策略研究——基于开源AI智能客服、AI智能名片与S2B2C商城小程序的融合应用
人工智能·小程序
半生过往11 小时前
微信小程序文件下载与预览功能实现详解
微信小程序·小程序·notepad++·压缩包下载解压
源码_V_saaskw11 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友