微信小程序的this和that，触摸水波涟漪效果

var that=this;//把this对象复制到临时变量that 
在success回调函数中使用that.data就能获取到数据了。

不过，还有另外一种方式，也很特别，是将success回调函数换一种声明方式，如下：

1. success: res =>{
2. this.setData({
3. loadingHidden: true,
4. hideCommitSuccessToast: false
5. })
6. }

在这种方式下，this可以直接使用，完全可以获取到data数据。

再给一个完整的例子：

1. success: res => {
2. if (res.data.code != 0) {
3. // 提交失败
4. this.setData({
5. loadingHidden: true,
6. hiddenTips: false,
7. tipsContent: res.data.message
8. })
9. } else {
10. // 提交成功
11. this.setData({
12. loadingHidden: true,
13. hideCommitSuccessToast: false
14. })
15. subBtn = false;
16.  
17. // 定时，3秒消失
18. setTimeout(() => {
19. this.setData({
20. hideCommitSuccessToast: true
21. })
22. wx.navigateBack({ delta: 2 });
23. }, 2000);
24.  
25. }
26. }

二：触摸水波涟漪效果

分享者：未知，原文地址  效果

html代码

1. <view class="ripple" style="{{rippleStyle}}"></view>
2. <view class="container" bindtouchstart="containerTap"></view>

css代码

1. .container{
2. width:100%;
3. height:500px;
4. }
5. .ripple {
6. background-color: rgba(0, 0, 0, 0.8);
7. border-radius: 100%;
8. height:10px;
9. width:10px;
10. margin-top: -90px;
11. position: absolute;
12. -webkit-transform: scale(0);
13. }
14. @-webkit-keyframes ripple {
15. 100% {
16. -webkit-transform: scale(12);
17. transform: scale(12);
18. background-color: transparent;
19. }
20. }

js代码

1. containerTap:function(res){
2. console.log(res.touches[0]);
3. var x=res.touches[0].pageX;
4. var y=res.touches[0].pageY+85;
5. this.setData({
6. rippleStyle:''
7. });
8. this.setData({
9. rippleStyle:'top:'+y+'px;left:'+x+'px;-webkit-animation: ripple 0.4s linear;animation:ripple 0.4s linear;'
10. });
11. }