小猿圈web前端之微信小程序实现点击效果

小猿圈002

最近小程序越来越好，而且前景和薪资也是越来越高，而且小程序实现点击效果，具有一定的价值，今天小猿圈web前端讲师今天给大家讲微信小程序实现点击效果的，正在学习web前端的小伙伴不要错过呦。

微信小程序动画之点击效果的具体代码，供大家参考，具体内容如下

代码：

js：

// pages/test/test.js

Page({

containerTap: function (res) {

  var that = this

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

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

  this.setData({

  rippleStyle: ''

  });

  setTimeout(function () {

  that.setData({

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

  });

  }, 200)

},

})

wxml：

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

<view class="container" bindtouchstart="containerTap"></view>

wxss：

page{height:100%}

.container{

  width:100%;

  height:100%;

  overflow: hidden

}

.ripple {

  background-color:aquamarine;

  border-radius: 100%;

  height:10px;

  width:10px;

  margin-top: -90px;

  position: absolute;

  overflow: hidden

}

@-webkit-keyframes ripple {

  100% {

  webkit-transform: scale(12);

  transform: scale(12);

  background-color: transparent;

  }

}

以上就是小猿圈web前端老师讲的微信小程序实现点击效果，想要学习前端知识可以观看我的文章，相信不会让你失望的web前端自学②群：738735873，学习前端可以到小猿圈网站去看一下最新最全面的前端课程，希望对大家的学习有所帮助。