一.頁面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;
}
}