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


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 相关文章推荐
判断用户是否在线的代码
Mar 05 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
Dec 06 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 Javascript
JavaScript中的replace()方法使用详解
Jun 06 Javascript
javascript产生随机数方法汇总
Jan 25 Javascript
JS动态添加选项案例分析
Oct 17 Javascript
webpack入门+react环境配置
Feb 08 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 Javascript
微信小程序使用for循环动态渲染页面操作示例
Dec 25 Javascript
js里面的变量范围分享
Jul 18 Javascript
vue 授权获取微信openId操作
Nov 13 Javascript
原生JS实现分页
Apr 19 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网站判断用户是否是手机访问的方法
2013/11/01 PHP
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
2015/06/19 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
基于jquery.page.js实现分页效果
2018/01/01 jQuery
解决vue+webpack打包路径的问题
2018/03/06 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
python实现TF-IDF算法解析
2018/01/02 Python
Python实现购物车程序
2018/04/16 Python
django使用LDAP验证的方法示例
2018/12/10 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
Python restful框架接口开发实现
2020/04/13 Python
Python使用xpath实现图片爬取
2020/09/16 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
python温度转换华氏温度实现代码
2020/12/06 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
职专应届生求职信
2013/11/16 职场文书
出纳岗位职责
2015/01/31 职场文书
2015年教师节慰问信
2015/03/23 职场文书