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

相关推荐
2501_915918413 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
是Dream呀3 天前
时序数据库选型指南:Apache IoTDB企业级解决方案深度解析
apache·时序数据库·iotdb
一个天蝎座 白勺 程序猿3 天前
Apache IoTDB(5):深度解析时序数据库 IoTDB 在 AINode 模式单机和集群的部署与实践
数据库·apache·时序数据库·iotdb·ainode
00后程序员张3 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
路由侠内网穿透3 天前
本地部署 GPS 跟踪系统 Traccar 并实现外部访问
运维·服务器·网络·windows·tcp/ip
研华嵌入式3 天前
如何在高通跃龙QCS6490 Arm架构上使用Windows 11 IoT企业版?
arm开发·windows·嵌入式硬件
破无差3 天前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张3 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬3 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106323 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode