微信小程序———点击屏幕涟漪效果

原创于 2018-08-14 22:47:16 发布 · 4.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

本文介绍了一个使用JavaScript实现的触摸反馈效果。当用户在屏幕上点击时，会在点击位置生成一个扩大的透明圆圈作为视觉反馈。该效果利用了CSS动画和触摸事件进行定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

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;
    }
}

点击屏幕后会出现这个