版权声明: https://blog.csdn.net/qq_41542894/article/details/81676082
js中
containerTap: 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;'
});
}
wxml中
<view>
<view class="ripple" style="{{rippleStyle}}"></view>
<view class="container" bindtouchstart="containerTap"></view>
</view>
wxss中
.container{
width:100%;
height:500px;
}
.ripple {
background-color: rgba(50%,70%, 60%, 0.6);
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;
}
}
点击屏幕后会出现这个