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


Posted in Javascript onMarch 14, 2017

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

关键核心代码

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

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

Javascript 相关文章推荐
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 Javascript
在图片上显示左右箭头类似翻页的代码
Mar 04 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
使用jQuery.wechat构建微信WEB应用
Oct 09 Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 Javascript
原生js实现新闻列表展开/收起全文功能
Jan 20 Javascript
详谈angularjs中路由页面强制更新的问题
Apr 24 Javascript
捕获未处理的Promise错误方法
Oct 13 Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
JS操作json对象key、value的常用方法分析
Oct 29 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 #Javascript
vuejs响应用户事件(如点击事件)
Mar 14 #Javascript
微信小程序 在线支付功能的实现
Mar 14 #Javascript
JS和canvas实现俄罗斯方块
Mar 14 #Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
Mar 14 #Javascript
canvas实现刮刮卡效果
Mar 14 #Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 #Javascript
You might like
php的4种常见运行方式
2015/03/20 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
2012/02/10 Javascript
javascript实现日历控件(年月日关闭按钮)
2012/12/12 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
JS实现字符串去重及数组去重的方法示例
2018/04/21 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
JS扁平化输出数组的2种方法解析
2019/09/17 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
在Docker上开始部署Python应用的教程
2015/04/17 Python
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
Django中FilePathField字段的用法
2020/05/21 Python
Python调用飞书发送消息的示例
2020/11/10 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
急诊科护士自我鉴定
2013/10/14 职场文书
学习委员自我鉴定
2014/01/13 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
2015大一新生军训感言
2015/08/01 职场文书
2016年社区服务活动总结
2016/04/06 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
Golang中channel的原理解读(推荐)
2021/10/16 Golang
如何利用 CSS Overview 面板重构优化你的网站
2021/10/24 HTML / CSS
Python 数据可视化之Bokeh详解
2021/11/02 Python
Golang并发工具Singleflight
2022/05/06 Golang