小程序自定义底部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就可以了。

相关推荐
deepwater_zone11 小时前
主流的开源协议(MIT,Apache,GPL v2/v3)
apache·开源协议
lingggggaaaa11 小时前
小迪安全v2023学习笔记(七十九讲)—— 中间件安全&IIS&Apache&Tomcat&Nginx&CVE
笔记·学习·安全·web安全·网络安全·中间件·apache
小猫挖掘机(绝版)12 小时前
通过tailscale实现一台电脑上vscode通过ssh连接另一台电脑上的VMware Linux 虚拟机
linux·windows·vscode·ubuntu·ssh
毕设源码-邱学长13 小时前
【开题答辩全过程】以 基于微信小程序校园综合服务平台的设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
lifallen13 小时前
Kafka 内存池MemoryPool 设计
数据结构·kafka·apache
從南走到北14 小时前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·开发语言·微信·微信小程序·小程序
canglingyue16 小时前
微信小程序截屏与录屏功能详解
微信小程序·小程序
微三云-轩17 小时前
区块链系统:解决549 亿元积分商城是否违法的问题
大数据·小程序·重构·区块链·生活
你我约定有三18 小时前
java--泛型
java·开发语言·windows
self_myth19 小时前
[特殊字符] 深入理解操作系统核心特性:从并发到分布式,从单核到多核的全面解析
windows·macos·wpf·harmonyos