E企盈营销工具技术服务商 热线:4006-838-530

微信小程序动画之点击效果

E企盈直播平台营销卖货系统

微信小程序动画之点击效果代码:js:// pages/test/test.jsPage({  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;    }}

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序动画之点击效果
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏