小程序自定义底部弹窗

最新推荐文章于 2025-03-14 16:05:42 发布

子彧师兄

最新推荐文章于 2025-03-14 16:05:42 发布

阅读量496

点赞数

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.youkuaiyun.com/heiye081225/article/details/110955814

版权

小程序自定义底部弹窗

先看效果图，如下：
在这里插入图片描述

话不多说，直接上代码：

首先是demo.js：

Page({
   
  data: {
   
      showModalStatus: false
  },
  
  onLoad: function (options) {
   
      console.log(options.id)
  },

  /**
   * 显示遮罩层
   */
  showBuyModal () {
   
      var animation = wx.createAnimation({
   
          duration: 200,
          timingFunction: "ease",
          delay: 0
      })
      this.animation = animation
      animation.translateY(300).step()
      this.setData({
   
          animationData: animation.export(), // export 方法每次调用后会清掉之前的动画操作。
          showModalStatus: true
      })
      setTimeout(() => {
   
          animation.translateY(0).step()
          this.setData({
   
              animationData: animation.export()  // export 方法每次调用后会清掉之前的动画操作。
          })
          console.log(this)
      }, 200)
  },
  
  /**
   * 隐藏遮罩层
   */
  hideBuyModal ()

最低0.47元/天解锁文章