微信小程序模仿app点击水波纹效果

话不多说，直接看效果

代码：

测试



.container{
    width:100%;
    height:500px;
}
.ripple {
    background-color: rgba(181, 236, 240, 0.8);
    border-radius: 100%;
    height:10px;
    width:10px;
    margin-top: -90px;
    position: absolute;
    transform: scale(0);
}
@keyframes changeAnimate {
    100% {
    transform: scale(12);
    background-color: transparent;
    }
}


//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
  
  },
  onLoad: function () {
  },
 containerTap: function (res) {
   var that=this;
    var x = res.touches[0].pageX;
    var y = res.touches[0].pageY + 85;
    this.setData({
      changeStyle: 'top:' + y + 'px;left:' + x + 'px;animation:changeAnimate 0.4s linear;'
    });
 setTimeout(function(){
   that.setData({
     changeStyle: ''
   });
 },500) 
  }
})

核心点:点击事件触发后先setData({changeStyle: 'top:' + y + 'px;left:' + x + 'px;animation:changeAnimate 0.4s linear;'}),然后利用setTimeout清空值，不能写成

 var that=this;
    var x = res.touches[0].pageX;
    var y = res.touches[0].pageY + 85;
    this.setData({
      changeStyle: 'top:' + y + 'px;left:' + x + 'px;animation:changeAnimate 0.4s linear;'
    });

   that.setData({
     changeStyle: ''
   });

  }

因为这样的话不会产生水波纹效果，这是因为代码是按顺序执行的，所以这个点击事件时changeStyle的值为空，故无效果，

而用setTimeout异步处理，就能让水波纹效果先产生，然后再把changeStyle的值变为空