微信小程序动画实现弹出(关闭)优惠卷页面

m0_68605510

已于 2023-01-29 16:20:41 修改

阅读量903

点赞数

文章标签：微信小程序 css Powered by 金山文档

于 2023-01-13 17:06:44 首次发布

本文链接：https://blog.csdn.net/m0_68605510/article/details/128676424

版权

这篇文章展示了如何在微信小程序中创建一个动态弹出的优惠券功能。通过WXML结构定义弹窗和遮罩层，CSS实现动画效果和样式设计，以及JavaScript控制弹窗的显示和关闭，营造出吸引用户的新人优惠体验。

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

进入页面是动态弹出优惠卷，点击关闭再次运行代码即可弹出，其中图片可根据个人需要更换：

代码如下：

wxml

<view>
    <!-- 弹窗遮罩层 -->
    <view wx:if="{{show}}" class="popover-mask-layer"></view>
    <view hidden="{{!show}}" class="container" animation="{{cartoonData}}">
        <image bindload="cartoon" class="logo" mode="widthFix" src="../../icon/logo.jpeg"></image>
        <view class="content">
            <view class="font">新人专享优惠</view>
            <view class="middle">
                <view class="text">送你新人见面礼</view>
                <view class="ticket">
                    <view class="left">
                        <view class="money">￥20</view>
                        <view class="liter">首杯立减</view>
                    </view>
                    <view class="right">
                        <view class="logo">
                            <image mode="widthFix" src="../../icon/search.png"></image>
                        </view>
                    </view>
                </view>
            </view>
            <view class="foot">
                <view class="title">第一杯咖啡 喝椰树</view>
                <view>
                    <button class="button">立即使用</button>
                </view>
            </view>
        </view>
        <view class="bottom" bindtap="closeTheCouponPopUp">
            <image mode="widthFix" src="{{closeBtnImages}}"></image>
        </view>
    </view>
</view>

css:

.usermotto{
    margin-top: 100px;
    border:solid;
}
.container{
    transform: scale(0);
}
.content{
    width: 400rpx;
    height: 500rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: orangered;
    border-radius: 10px 10px 10px 10px;
    /* z-index: 1000; */
    
}
.font{
    color: white;
    background-color:     #FF4500;
    width: 220rpx;
    text-align: center;
    height: 50rpx;
    border-radius: 0 0 12px 12px;
    z-index: 999;
    font-size: 17px;
    font-weight: bold;
}
.middle{
    margin-top: -46rpx;
    width: 100%;
    height: 250rpx;
    background-color: #FFFFF0;
    display: flex;
    flex-direction: column;
    border-radius: 10px 10px 0 0;
    /* justify-content: center; */
    align-items: center;

}
.text{
    color: orangered;
    font-weight: bolder;
    letter-spacing: 1px;
    margin-top: 50rpx;
    font-size: 17px;
}
.ticket{
    width: 80%;
    height: 140rpx;
    /* background-color: #FF9933; */
    background-color: white;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    margin-top: 20rpx;
}
.left{
  flex: 3;
  color:    #D2691E;
  background-color: #FFDEAD;
  border-radius: 5px;
  background:radial-gradient(circle at right 0, transparent 16rpx, #FFDEAD 0) left 0 /100% 50%  no-repeat,
  radial-gradient(circle at right 100%, transparent 16rpx,  #FFDEAD  0) left 100% /100% 50%  no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.right{
  flex: 2;
  background-color: #FFDEAD;
  border-radius: 10px;
  text-align: center;
  background:radial-gradient(circle at left 0, transparent 16rpx, #FFDEAD 0) left 0 /100% 50%  no-repeat,
  radial-gradient(circle at left 100%, transparent 16rpx,  #FFDEAD 0) left 100% /100% 50%  no-repeat;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 100%;
}
.foot{
    width: 100%;
    height: 250rpx;
    border-radius: 0 0 10px 10px;
    background-color: teal;
    background: radial-gradient(200px 50px at 110px 0, #FFFFF0 60%, orangered 65%);
}
.title{
    margin-top: 90rpx;
    text-align: center;
    font-weight: bold;
    color: white;
    letter-spacing: 1px;
    font-size: 13px;
    font-family:"宋体",Times,serif;
}
.button{
    border-radius: 20px;
    margin-top: 20rpx;
    color:     #D2691E;
    background-color:     #F4A460;
    /* height: 60rpx; */
    font-size: 17px;
    font-weight: bolder;
}
.liter{
  font-weight: bolder;
  letter-spacing: 1px;
 font-size: 10px;
  /* font-family:"黑体",Times,serif; */
}
.money{
   font-size: 28px;
   font-weight: bolder;
}
.logo{
   border-radius: 50px;
    width: 100rpx;
}
.popover-mask-layer {
    height: 100vh;
    width: 100vw;
    background-color: rgba(129, 126, 126, 0.5);
    position: fixed;
    top: 0;
    z-index: 0;
  }
  .bottom{
      width: 40rpx;
      height: 40rpx;
      border-radius: 10px;
      margin-top: 30rpx;
  }

js:

Page({
  /**
   * 页面的初始数据
   */
  data: {
   show:false,
   closeBtnImages: 'http://m.qpic.cn/psc?/V14ZaBeY40XWC8/zkoezU7GGNbZGOF.DPhgQZjV2a5npNMM5D47K1jMLBHO3ccXXkEwsTHa*69Gi8pCGkdmz4imEISAR0fRbZj7*malDMMANN7ZzH8oI6XDWDk!/b&bo=QABAAEAAQAADCSw!&rf=viewer_4'
  },

  cartoon:function(){
    // var that = this;
    setTimeout(()=>{
      this.setData({
        show:true
      })
      var animation=wx.createAnimation({
       duration:600,
       timingFunction:'ease-in-out'
      });
      // that.animation = animation;
      animation.scale(1).step();
      this.setData({
        cartoonData:animation.export()
      })
    },500)
  
  },
  closeTheCouponPopUp:function(){
    var animation=wx.createAnimation({
      duration:600,
      timingFunction:'ease-in-out'
    });
    animation.scale(0).opacity(0).step();
    this.setData({
      cartoonData:animation.export(),  
    })
    setTimeout(()=>{
   this.setData({
     show:false
   })
    },1000)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  }
})

参考：https://blog.csdn.net/weixin_42063951/article/details/104062033