微信小程序底部菜单栏弹出层实现教程

首先，在 app.json 中定义底部菜单栏，例如：

'tabBar': {
  'list': [
    {
      'pagePath': 'pages/index/index',
      'text': '首页',
      'iconPath': 'images/tabbar/home.png',
      'selectedIconPath': 'images/tabbar/home-active.png'
    },
    {
      'pagePath': 'pages/cart/cart',
      'text': '购物车',
      'iconPath': 'images/tabbar/cart.png',
      'selectedIconPath': 'images/tabbar/cart-active.png'
    },
    {
      'pagePath': 'pages/profile/profile',
      'text': '我的',
      'iconPath': 'images/tabbar/profile.png',
      'selectedIconPath': 'images/tabbar/profile-active.png'
    }
  ]
}

在 index 页面中添加一个按钮，点击后弹出层：

<view class='container'>
  <button class='btn' bindtap='showModal'>点击弹出层</button>
  <view class='modal' hidden='{{!modalVisible}}'>
    <view class='content'>
      <view class='title'>这是弹出层的标题</view>
      <view class='text'>这是弹出层的内容</view>
      <button class='close' bindtap='hideModal'>关闭</button>
    </view>
  </view>
</view>

在 index 页面的 .js 文件中添加 showModal 和 hideModal 方法：

Page({
  data: {
    modalVisible: false
  },
  showModal: function () {
    this.setData({
      modalVisible: true
    })
  },
  hideModal: function () {
    this.setData({
      modalVisible: false
    })
  }
})

在 index 页面的 .wxss 文件中添加样式：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.btn {
  font-size: 16px;
  color: #fff;
  background-color: #007aff;
  padding: 10px 20px;
  border-radius: 5px;
}

.modal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  width: 80%;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.text {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.close {
  font-size: 16px;
  color: #007aff;
  background-color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  border: 1px solid #007aff;
}

运行小程序，点击底部菜单栏的“首页”，可以看到弹出层效果。