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

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

关键核心代码

<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

})

}

})

}

})

}

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

以上是 微信小程序 动态绑定数据及动态事件处理 的全部内容, 来源链接: utcz.com/z/319871.html

回到顶部