微信小程序手撕底部弹出层

King嘉

已于 2023-08-17 13:26:31 修改

阅读量113

点赞数 2

文章标签：小程序

于 2021-07-12 17:15:48 首次发布

本文链接：https://blog.csdn.net/JJQ_3373/article/details/118679465

版权

这篇博客展示了如何在微信小程序中实现一个屏幕背景变暗的弹出框，并详细解释了WXML、JS和CSS代码的实现过程。当用户点击按钮时，屏幕会逐渐变暗并显示一个包含商品信息和加入购物车功能的底部弹窗。通过使用动画效果，实现了弹窗的平滑显示和隐藏，增强了用户体验。

摘要由CSDN通过智能技术生成

1、wxml代码

 <!--屏幕背景变暗的背景  -->
      <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
      <!--弹出框  -->
      <view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">
        <!--自定义弹窗内容-->
        <!-- <image src="{{xiangList.pics.pic}}"></image> -->
        <text>{{xiangList.basicInfo.name}}</text>
        <text class="mani">￥<text>{{xiangList.basicInfo.minPrice}}</text></text>
        <van-button type="danger" size="large" bindtap="shop">
          加入购物车
        </van-button>
      </view>

2、js代码

//点击我显示底部弹出框
  clickme: function () {
    this.showModal();
  },
  shopcar() {

  },
  //显示对话框
  showModal: function () {
    // 显示遮罩层
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation
    animation.translateY(300).step()
    this.setData({
      animationData: animation.export(),
      showModalStatus: true
    })
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export()
      })
    }.bind(this), 200)
  },
  //隐藏对话框
  hideModal: function () {
    // 隐藏遮罩层
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation
    animation.translateY(300).step()
    this.setData({
      animationData: animation.export(),
    })
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export(),
        showModalStatus: false
      })
    }.bind(this), 200)
  },

3、css代码

/*使屏幕变暗  */
.commodity_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.4;
  overflow: hidden;
  z-index: 1000;
  color: #fff;
}
/*对话框 */
.commodity_attr_box {
  height: 40%;
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2000;
  background: #fff;
  padding-top: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}