推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
微信小程序的this和that，触摸水波涟漪效果
发布时间:2020-12-06
var that=this;//把this对象复制到临时变量that
在success回调函数中使用that.data就能获取到数据了。
不过，还有另外一种方式，也很特别，是将success回调函数换一种声明方式，如下：
success: res =>{
this.setData({
loadingHidden: true,
hideCommitSuccessToast: false
})
}
在这种方式下，this可以直接使用，完全可以获取到data数据。
再给一个完整的例子：
success: res => {
if (res.data.code != 0) {
// 提交失败
this.setData({
loadingHidden: true,
hiddenTips: false,
tipsContent: res.data.message
})
} else {
// 提交成功
this.setData({
loadingHidden: true,
hideCommitSuccessToast: false
})
subBtn = false;
// 定时，3秒消失
setTimeout(() => {
this.setData({
hideCommitSuccessToast: true
})
wx.navigateBack({ delta: 2 });
}, 2000);
}
}
二：触摸水波涟漪效果
分享者：未知，原文地址 效果
html代码
<view class="ripple" style="{{rippleStyle}}"></view>
<view class="container" bindtouchstart="containerTap"></view>
css代码
.container{
width:100%;
height:500px;
}
.ripple {
background-color: rgba(0, 0, 0, 0.8);
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;
}
}
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;'
