微信小程序点击有涟漪效果

 

一.页面wxml效果代码：

<view class="ripple" style="{{rippleStyle}}"></view>

<view class="container" bindtouchstart='containerTap1'>

二.js控制效果代码：

containerTap1: function (res) {

console.log(res.touches[0]);

var x = res.touches[0].pageX;

var y = res.touches[0].pageY + 85;

this.setData({

rippleStyle: ''

});

this.setData({

rippleStyle: 'top:' + y + 'px;left:' + x + 'px;-webkit-animation: ripple 0.4s linear;animation:ripple 0.4s linear;'

});

},

三.样式wxss部分代码：

.ripple {

background-color: rgba(0, 0, 0, 0.8);

border-radius: 100%;

height:10px;

width:10px;

margin-top: -90px;

position: absolute;

-webkit-transform: scale(0);

}

@-webkit-keyframes ripple {

100% {

-webkit-transform: scale(12);

transform: scale(12);

background-color: transparent;

}

}