主页 > 教程合集 > Html/css >

微信小程序实现点击效果代码推荐

时间:2019-08-23 阅读:0

今天提供一段微信小程序动画之点击效果的具体代码,供大家参考。

微信小程序实现点击效果代码推荐

具体内容如下:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,实现效果如下:

微信小程序实现点击效果代码推荐

本站所有资源均在Resource资源站有售,你可以点击》》Resource《《进入资源站自助购买,也可以扫描以下店铺二维码直接选购,自动极速发货

余斗微信二维码

扫描微信加好友咨询
了解更多

余斗淘宝店铺二维码

淘宝扫描二维码购买
自动发货

余斗余斗
  • 版权声明:原创文章由发表在Html/css分类下,2019-08-23最后更新,转载注明出处。

相关推荐

返回顶部