小程序模板网

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

发布时间:2018-04-12 11:03 所属栏目:小程序开发教程

一:this和that

分享者:别寒,原文地址 
微信小程序中,在wx.request({});方法调用成功或者失败之后,有时候会需要获取页面初始化数据data的情况,这个时候,如果使用,this.data来获取,会出现获取不到的情况,调试页面也会报undefiend。原因是,在javascript中,this代表着当前对象,会随着程序的执行过程中的上下文改变,在wx.request({});方法的回调函数中,对象已经发生改变,所以已经不是wx.request({});方法对象了,data属性也不存在了。官方的解决办法是,复制一份当前的对象,如下:

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


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23295.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询