小程序_底部弹出层

最新推荐文章于 2025-05-19 16:59:34 发布

weixin_30387339

最新推荐文章于 2025-05-19 16:59:34 发布

阅读量458

点赞数 1

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wush-1215/p/9474439.html

本文介绍了一种在微信小程序中实现弹窗动画的方法。通过wxml、wxss及js代码实现了点击按钮后显示带有过渡动画的弹窗，并提供隐藏功能。文章详细展示了如何设置动画效果、控制弹窗状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

wxml：

<text>我是弹出层的内容</text>

</view>

wxss：

.commodity_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
  z-index: 9;
  color: #fff;
}

.commodity_attr_box {
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  background: #fff;
  padding-top: 20rpx;
  height: 300px;
}
.commodity_attr_box{
  text-align: center;
  padding-top: 100rpx;
}

js：

Page({
  data: {
    showModalStatus: false,
    animationData: ''
  },
  onLoad: function () {
   
  },
  showModal: function () {
    // 显示遮罩层
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "ease-in-out",
      delay: 0
    })
    this.animation = animation
    animation.translateY(500).step()
    this.setData({
      animationData: animation.export(),
      showModalStatus: true
    })
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export()
      })
    }.bind(this), 200)
  },
  hideModal: function () {
    this.setData({
      showModalStatus: false,
    })
  
  }
})