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


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 相关文章推荐
跨浏览器的设置innerHTML方法
Sep 18 Javascript
jquery 经典动画菜单效果代码
Jan 26 Javascript
js字符编码函数区别分析
Dec 28 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
Vue拖拽组件开发实例详解
May 11 Javascript
详解jQuery中的easyui
Sep 02 jQuery
vue通过数据过滤实现表格合并
Nov 30 Javascript
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
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
星际流派综述
2020/03/04 星际争霸
深入PHP数据加密详解
2013/06/18 PHP
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
PHP内存使用情况如何获取
2015/10/10 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
js 目录列举函数
2008/11/06 Javascript
HTML DOM的nodeType值介绍
2011/03/31 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
window.onload和$(function(){})的区别介绍
2013/10/30 Javascript
jquery实现ajax提交form表单的方法总结
2014/03/03 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
我所理解的JavaScript中的this指向
2020/09/04 Javascript
python生成随机验证码(中文验证码)示例
2014/04/03 Python
Python松散正则表达式用法分析
2016/04/29 Python
浅析Python中元祖、列表和字典的区别
2016/08/17 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
Python对象与引用的介绍
2019/01/24 Python
Python内置方法实现字符串的秘钥加解密(推荐)
2019/12/09 Python
深入了解Python enumerate和zip
2020/07/16 Python
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
公司介绍信范文
2015/01/31 职场文书
会计工作态度自我评价
2015/03/06 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
会计做账心得体会
2016/01/22 职场文书
煤矿施工安全协议书
2016/03/22 职场文书
SpringRetry重试框架的具体使用
2021/07/25 Java/Android
浅谈Vue的computed计算属性
2022/03/21 Vue.js
深入理解 Golang 的字符串
2022/05/04 Golang