위 챗 애플 릿 동적 바 인 딩 데이터 및 동적 이벤트 처리

위 챗 애플 릿 동적 바 인 딩 데이터 및 동적 이벤트 처리
핵심 코드

<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);
        //      
        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 배경 에서 어떤 image 를 클릭 했 는 지 알 수 있 습 니 다.사진 을 올 린 후에 똑 같은 data-type 의 데이터 항목 을 순환 하여 할당 하면 해당 하 는 태그 에 동적 으로 할당 할 수 있 습 니 다.
addtaskimg 통 일 된 동적 이벤트
주요 코드 는 다음 과 같다.
.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)
  {
   //       ，        
   this.setData({
    blongtap:false
   });
   return;
  }
  var that = this;
   wx.chooseImage({
    count:1, //  1 
    success:function(res){
      //       ，        
      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         ，      objcet，wx   eval  
        console.log(res.Data);
        var objurl= JSON.parse(res.data);
        //      
        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  
        })        
       }
      })
    }
   })
 }

읽 어 주 셔 서 감사합니다. 여러분 에 게 도움 이 되 기 를 바 랍 니 다.본 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!