微信小程序 動(dòng)態(tài)綁定數(shù)據(jù)及動(dòng)態(tài)事件處理
關(guān)鍵核心代碼
<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>var objurl= JSON.parse(res.data);        //重置圖片參數(shù)        var temppostionlist=that.data.postionlist;        for (var i=0;i<temppostionlist.length;i++)        {          if (temppostionlist[i]["Type"]==e.currentTarget.dataset.type){                      temppostionlist[i]["imgurl"]=temppaths;           temppostionlist[i]["serverimgurl"]=objurl.Body.Data;           break;          }                    }         that.setData( {               postionlist:temppostionlist          })利用image的data-Type,可以在js后臺(tái)中知道是點(diǎn)擊了哪個(gè)image,上傳圖片后再循環(huán)得出相等data-type的數(shù)據(jù)項(xiàng)進(jìn)行賦值,這樣就能動(dòng)態(tài)給相應(yīng)的標(biāo)簽賦值 
addtaskimg 為統(tǒng)一的動(dòng)態(tài)事件
主要代碼如下
.wxml
 <scroll-view class="center" scroll-y="true">      <view class="midcenter" wx:for="{{postionlist}}">      <view class="mid_top" >          <image class="smallimage" src="../images/my/XXH/line_title.png" mode="aspectFit" ></image>          <text>{{item.KeyValue}}</text>      </view>      <view class="mid_center">          <text>{{item.Remark}}</text>      </view>      <view class="mid_bottom">          <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>      </view>            </view>    </scroll-view>.js
addtaskimg:function(e){     //添加選擇圖片    if (this.data.blongtap)  {   //處理如果是長(zhǎng)按,則不再執(zhí)行下面的   this.setData({    blongtap:false   });   return;  }  var that = this;   wx.chooseImage({    count:1, //默認(rèn)1張    success:function(res){      //先上傳至服務(wù)器,再返回路徑供保存      var temppaths=res.tempFilePaths[0];//+".jpg";      wx.uploadFile({       url:app.globalData.ghost+"YWTask/PutUploadFile?BillCode="+that.data.detail.BillCode+"&ID="+that.data.id,       filePath:temppaths,       name:'image',       formData:{},       success:function(res){        //res.data返回的是一個(gè)字符串,需進(jìn)行轉(zhuǎn)換成objcet,wx不識(shí)別eval函數(shù)        console.log(res.Data);        var objurl= JSON.parse(res.data);        //重置圖片參數(shù)        var temppostionlist=that.data.postionlist;        for (var i=0;i<temppostionlist.length;i++)        {          if (temppostionlist[i]["Type"]==e.currentTarget.dataset.type){                      temppostionlist[i]["imgurl"]=temppaths;           temppostionlist[i]["serverimgurl"]=objurl.Body.Data;           break;          }                    }         that.setData( {               postionlist:temppostionlist          })               }      })    }   }) }感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注