微信小程序中实现动态绑定数据及动态事件处理的示例分析

这篇文章主要为大家展示了“微信小程序中实现动态绑定数据及动态事件处理的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“微信小程序中实现动态绑定数据及动态事件处理的示例分析”这篇文章吧。

微信小程序 动态绑定数据及动态事件处理

关键核心代码

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

以上是“微信小程序中实现动态绑定数据及动态事件处理的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！