小程序模板網(wǎng)

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

發(fā)布時(shí)間:2018-04-12 11:03 所屬欄目:小程序開(kāi)發(fā)教程

一:this和that

分享者:別寒,原文地址 
微信小程序中,在wx.request({});方法調(diào)用成功或者失敗之后,有時(shí)候會(huì)需要獲取頁(yè)面初始化數(shù)據(jù)data的情況,這個(gè)時(shí)候,如果使用,this.data來(lái)獲取,會(huì)出現(xiàn)獲取不到的情況,調(diào)試頁(yè)面也會(huì)報(bào)undefiend。原因是,在javascript中,this代表著當(dāng)前對(duì)象,會(huì)隨著程序的執(zhí)行過(guò)程中的上下文改變,在wx.request({});方法的回調(diào)函數(shù)中,對(duì)象已經(jīng)發(fā)生改變,所以已經(jīng)不是wx.request({});方法對(duì)象了,data屬性也不存在了。官方的解決辦法是,復(fù)制一份當(dāng)前的對(duì)象,如下:

var that=this;//把this對(duì)象復(fù)制到臨時(shí)變量that 
在success回調(diào)函數(shù)中使用that.data就能獲取到數(shù)據(jù)了。

不過(guò),還有另外一種方式,也很特別,是將success回調(diào)函數(shù)換一種聲明方式,如下:

 

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

在這種方式下,this可以直接使用,完全可以獲取到data數(shù)據(jù)。

再給一個(gè)完整的例子:

 

				
  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. // 定時(shí),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. }


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/23295.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢