国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 課堂 > 小程序 > 正文

關于小程序動態綁定數據,動態事件處理的方法教程

2020-03-21 16:19:15
字體:
來源:轉載
供稿:網友
原理:主要是通過定義標簽的標識與數據進行判斷加載

關鍵核心代碼

  1. <image class="midimage" data-Type="{{item.Type}}" data-BillCode="{{item.BillCode}}" data-src="{{item.imgurl}}" src="{{item.imgurl}}" mode="scaleToFill" bindtap="addtaskimg" bindlongtap="imglongtap" ></image> 
  2.  
  3. var objurl= JSON.parse(res.data); 
  4.  
  5.                 //重置圖片參數 
  6.  
  7.                 var temppostionlist=that.data.postionlist; 
  8.  
  9.                 for (var i=0;i<temppostionlist.length;i++) 
  10.  
  11.                 { 
  12.  
  13.                     if (temppostionlist[i]["Type"]==e.currentTarget.dataset.type){                      
  14.  
  15.                       temppostionlist[i]["imgurl"]=temppaths; 
  16.  
  17.                       temppostionlist[i]["serverimgurl"]=objurl.Body.Data; 
  18.  
  19.                       break
  20.  
  21.                     }                        
  22.  
  23.                 } 
  24.  
  25.                 that.setData( {   
  26.  
  27.                          postionlist:temppostionlist    
  28.  
  29.                 }) 

利用image的data-Type,可以在js后臺中知道是點擊了哪個image,上傳圖片后再循環得出相等data-type的數據項進行賦值,這樣就能動態給相應的標簽賦值

addtaskimg 為統一的動態事件

主要代碼如下

.wxml

    
  1. <scroll-view class="center" scroll-y="true"> 
  2.  
  3.         <view class="midcenter" wx:for="{{postionlist}}"> 
  4.  
  5.         <view class="mid_top" > 
  6.  
  7.                 <image class="smallimage" src="../images/my/XXH/line_title.png" mode="aspectFit" ></image> 
  8.  
  9.                 <text>{{item.KeyValue}}</text> 
  10.  
  11.         </view> 
  12.  
  13.         <view class="mid_center"> 
  14.  
  15.                 <text>{{item.Remark}}</text> 
  16.  
  17.         </view> 
  18.  
  19.         <view class="mid_bottom"> 
  20.  
  21.                 <image class="midimage" data-Type="{{item.Type}}" data-BillCode="{{item.BillCode}}" data-src="{{item.imgurl}}" 
  22.  
  23.                 src="{{item.imgurl}}" mode="scaleToFill" bindtap="addtaskimg" bindlongtap="imglongtap" ></image> 
  24.  
  25.         </view>           
  26.  
  27.         </view> 
  28.  
  29.     </scroll-view> 


.js

  1. addtaskimg:function(e){     
  2.  
  3.     //添加選擇圖片   
  4.  
  5.     if (this.data.blongtap) 
  6.  
  7.     { 
  8.  
  9.       //處理如果是長按,則不再執行下面的 
  10.  
  11.       this.setData({ 
  12.  
  13.         blongtap:false 
  14.  
  15.       }); 
  16.  
  17.       return
  18.  
  19.     } 
  20.  
  21.     var that = this
  22.  
  23.      wx.chooseImage({ 
  24.  
  25.        count:1, //默認1張 
  26.  
  27.        success:function(res){ 
  28.  
  29.             //先上傳至服務器,再返回路徑供保存 
  30.  
  31.             var temppaths=res.tempFilePaths[0];//+".jpg"; 
  32.  
  33.             wx.uploadFile({ 
  34.  
  35.               url:app.globalData.ghost+"YWTask/PutUploadFile?BillCode="+that.data.detail.BillCode+"&ID="+that.data.id, 
  36.  
  37.               filePath:temppaths, 
  38.  
  39.               name:'image'
  40.  
  41.               formData:{}, 
  42.  
  43.               success:function(res){ 
  44.  
  45.                 //res.data返回的是一個字符串,需進行轉換成objcet,wx不識別eval函數 
  46.  
  47.                 console.log(res.Data); 
  48.  
  49.                 var objurl= JSON.parse(res.data); 
  50.  
  51.                 //重置圖片參數 
  52.  
  53.                 var temppostionlist=that.data.postionlist; 
  54.  
  55.                 for (var i=0;i<temppostionlist.length;i++) 
  56.  
  57.                 { 
  58.  
  59.                     if (temppostionlist[i]["Type"]==e.currentTarget.dataset.type){                      
  60.  
  61.                       temppostionlist[i]["imgurl"]=temppaths; 
  62.  
  63.                       temppostionlist[i]["serverimgurl"]=objurl.Body.Data; 
  64.  
  65.                       break
  66.  
  67.                     }                        
  68.  
  69.                 } 
  70.  
  71.                 that.setData( {   
  72.  
  73.                          postionlist:temppostionlist    
  74.  
  75.                 })                
  76.  
  77.               } 
  78.  
  79.             }) 
  80.  
  81.        } 
  82.  
  83.      }) 
  84.  
  85.   } 


發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 左贡县| 阳谷县| 宁海县| 紫金县| 漳州市| 涪陵区| 来凤县| 凌源市| 晋江市| 运城市| 金昌市| 丰城市| 三台县| 桓仁| 晋中市| 武穴市| 泽库县| 中西区| 耒阳市| 武宁县| 马龙县| 秦皇岛市| 达拉特旗| 武汉市| 温州市| 台东县| 庆城县| 工布江达县| 遂川县| 葵青区| 凌源市| 广水市| 张家界市| 枣阳市| 施甸县| 天峨县| 永春县| 前郭尔| 无锡市| 奉化市| 贞丰县|