用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

关于小程序动态绑定数据,动态事件处理

纸飞机 2018-3-8 09:37

作者:Mr.Voop,来自公众号:宏记 原理:主要是通过定义标签的标识与数据进行判断加载关键核心代码var objurl= JSON.parse(res.data); //重置图片参数 var temppostionlist=that.data ...

作者:Mr.Voop,来自公众号:宏记
原理:主要是通过定义标签的标识与数据进行判断加载

关键核心代码

  1. class="midimage" data-Type="{{item.Type}}" data-BillCode="{{item.BillCode}}" data-src="{{item.imgurl}}" src="{{item.imgurl}}" mode="scaleToFill" bindtap="addtaskimg" bindlongtap="imglongtap" >
  1. var objurl= JSON.parse(res.data);
  2. //重置图片参数
  3. var temppostionlist=that.data.postionlist;
  4. for (var i=0;i<temppostionlist.length;i++)
  5. {
  6. if (temppostionlist[i]["Type"]==e.currentTarget.dataset.type){
  7. temppostionlist[i]["imgurl"]=temppaths;
  8. temppostionlist[i]["serverimgurl"]=objurl.Body.Data;
  9. break;
  10. }
  11. }
  12. that.setData( {
  13. postionlist:temppostionlist
  14. })

利用image的data-Type,可以在js后台中知道是点击了哪个image,上传图片后再循环得出相等data-type的数据项进行赋值,这样就能动态给相应的标签赋值
addtaskimg 为统一的动态事件

主要代码如下

.wxml

  1. class="center" scroll-y="true">
  2. class="midcenter" wx:for="{{postionlist}}">
  3. class="mid_top" >
  4. class="smallimage" src="../images/my/XXH/line_title.png" mode="aspectFit" >
  5. {{item.KeyValue}}
  6. class="mid_center">
  7. {{item.Remark}}
  8. class="mid_bottom">
  9. class="midimage" data-Type="{{item.Type}}" data-BillCode="{{item.BillCode}}" data-src="{{item.imgurl}}"
  10. src="{{item.imgurl}}" mode="scaleToFill" bindtap="addtaskimg" bindlongtap="imglongtap" >

.js

  1. addtaskimg:function(e){
  2. //添加选择图片
  3. if (this.data.blongtap)
  4. {
  5. //处理如果是长按,则不再执行下面的
  6. this.setData({
  7. blongtap:false
  8. });
  9. return;
  10. }
  11. var that = this;
  12. wx.chooseImage({
  13. count:1, //默认1张
  14. success:function(res){
  15. //先上传至服务器,再返回路径供保存
  16. var temppaths=res.tempFilePaths[0];//+".jpg";
  17. wx.uploadFile({
  18. url:app.globalData.ghost+"YWTask/PutUploadFile?BillCode="+that.data.detail.BillCode+"&ID="+that.data.id,
  19. filePath:temppaths,
  20. name:'image',
  21. formData:{},
  22. success:function(res){
  23. //res.data返回的是一个字符串,需进行转换成objcet,wx不识别eval函数
  24. console.log(res.Data);
  25. var objurl= JSON.parse(res.data);
  26. //重置图片参数
  27. var temppostionlist=that.data.postionlist;
  28. for (var i=0;i<temppostionlist.length;i++)
  29. {
  30. if (temppostionlist[i]["Type"]==e.currentTarget.dataset.type){
  31. temppostionlist[i]["imgurl"]=temppaths;
  32. temppostionlist[i]["serverimgurl"]=objurl.Body.Data;
  33. break;
  34. }
  35. }
  36. that.setData( {
  37. postionlist:temppostionlist
  38. })
  39. }
  40. })
  41. }
  42. })
  43. }
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏