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

相关推荐
单线程的Daniel2 分钟前
Dubbo RPC 序列化问题记录
windows·rpc·dubbo
MonkeyKing_sunyuhua17 分钟前
微信小程序能不能获取物联网的上的设备数据
物联网·微信小程序·小程序
paopaokaka_luck17 分钟前
基于SpringBoot+Vue的酒类仓储管理系统
数据库·vue.js·spring boot·后端·小程序
mg66837 分钟前
微信小程序入门实例_____从零搭建你的第一个微信小程序
微信小程序·小程序
皮皮灬虾2 小时前
微信小程序下单页—地址列表页—新增地址页 页面交互
微信小程序·小程序·交互
小毛驴8502 小时前
Windows 环境下设置 RabbitMQ 的 consumer_timeout 参数
windows·分布式·rabbitmq
马里马里奥-9 小时前
在Windows系统部署本地智能问答系统:基于百度云API完整教程
windows·云计算·百度云
源码_V_saaskw9 天前
宇鹿家政服务系统小程序ThinkPHP+UniApp
微信小程序·小程序·uni-app·微信公众平台
曹勖之9 天前
simuilink和ROS2数据联通,Run后一直卡在Initializting
windows·matlab·simulink·ros2
说私域9 天前
云零售新中枢:定制化“开源AI智能名片+S2B2C商城小程序”驱动的沉浸式触点进化论
人工智能·小程序·开源·零售