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

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

关键核心代码

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

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

(0)

相关推荐

  • 微信小程序 动态绑定事件并实现事件修改样式

    微信小程序 动态绑定事件并实现事件修改样式 实例代码 wxml <scroll-view class="reportTypeScroll" scroll-x="true" scroll-left="{{toLeftNum}}"> <block wx:for-items="{{reportTypeList}}" wx:key="{{index}}"> <text type=&qu

  • 详解微信小程序 template添加绑定事件

    详解微信小程序 template添加绑定事件 对于模板的使用,我是想将模板的事件单独出来,其他引用模板的页面中不再掺杂模板事件,比较方便管理,如果还有其他好的解决办法, 请赐教. template.wxml <view bindtap="clickView" class="tempClass">temp模板</view> template.js var temp = { clickView: function () { console.log

  • 微信小程序之绑定点击事件实例详解

    微信小程序之绑定点击事件实例详解 微信小程序出来那么久了,趁着有时间自己研究一下,前阶段看一了一下,但是不允许个人注册,现在已经对个人开放了,所以爱好者们可以自己研究了. 首先,我们看一下如何添加底部的标签栏:在app.json里操作 { "pages":[ //在这里添加页面的路径 "pages/index/index", "pages/logs/logs", "pages/home/home" ], "windo

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

    微信小程序 动态绑定数据及动态事件处理 关键核心代码 <image class="midimage" data-Type="{{item.Type}}" data-BillCode="{{item.BillCode}}" data-src="{{item.imgurl}}" src="{{item.imgurl}}" mode="scaleToFill" bindtap="

  • 微信小程序之数据双向绑定与数据操作

     微信小程序之数据双向绑定与数据操作 数据双向绑定是指js部分数据发生变化是html部分的数据也会发生变化,当然html部分数据发生变化js部分数据也会发生变化,从而使界面很方便的实现动态数据显示,一般拥有数据双向绑定的前端框架都为mvvm结构.数据双向绑定是个好东西,an1 an2 vue  也都有数据双向绑定的机制,而且基本都差不多,抄来抄去嘛!!下面以一个列表为例子来说下数据双向绑定及数据的操作. 1.把要进行数据双向绑定的属性放在page的data里,然后在html里使用{{属性名}}即

  • 微信小程序基于slider组件动态修改标签透明度的方法示例

    本文实例讲述了微信小程序基于slider组件动态修改标签透明度的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml <view class="img" style="opacity:{{imgOpacity}}"></view> <slider min="0" max="1" step="0.1" show-value value=&quo

  • 微信小程序点击按钮动态切换input的disabled禁用/启用状态功能

    做微信小程序项目的时候遇到一个功能,个人信息资料的修改与保存.以下是说明及简化后的代码: 1.页面加载完成时,所有input处于禁用状态: 2.点击编辑按钮时,文字切换成"保存",身份证input保持始终不可修改状态(即禁用), 姓名input可以修改(即动态加载切换禁用/启用): 3.再次点击按钮文字切回"编辑",所有input变为禁用状态. 以下是wxml部分 <view class="btn"> <button bindt

  • 微信小程序 本地数据存储实例详解

    微信小程序 本地数据存储实例详解 前言 如果您在看此文章之前有过其他程序的开发经验,那一定会知道一般例如安卓或者苹果的原生APP都提供了本地的存储功能,甚至可以使用sqlite数据库来做存储.可是微信的小程序框架基于微信本身,其实际运行环境只是在浏览器里面,所以不会提供那么丰富的数据存储实力.但html5开始已经可以在浏览器里面存储数据,好在微信的小程序给这个功能封装好了,这样我们可以使用数据存储. 每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStor

  • 微信小程序 input输入及动态设置按钮的实现

    微信小程序 input输入及动态设置按钮的实现 [需求]实现当手机号已填写和协议已勾选时,"立即登录"按钮变亮,按钮可点击:若有一个不满足,按钮置灰,不可点击:实现获取短信验证码,倒计时提示操作:对不满足要求内容进行toast弹窗提示. <view class="container"> <!--手机号--> <view class="section"> <text class="txt"

  • 微信小程序首页数据初始化失败的解决方法

    一. 问题描述 用户首次后再次进入小程序时,我们通常需要通过获取用户openid或unionid用作唯一标示与后台进行数据交流,初始化用户信息.当我们通过第三方服务器跟微信建立请求时,微信需要用户确认是否公开信息.如图1,从console可以看到,在请求的同时,我们的首页index已经加载完成,图中初始化数据显示为空.无论我们将请求信息写在app.js的onload中或者index.js中,当我们点击确认后,请求信息才执行success方法,将第三方服务器返回的数据处理,这样的因需要用户点击而产

  • 微信小程序 本地数据读取实例

    微信小程序 本地数据读取实例 一般情况下,小程序的utils这个文件夹下,我们可以把本地的数据写进去,封装成.js文件,提供对外暴露的接口,然后读取本地数据.如果涉及到一些针对这些数据的处理方法,也可以把方法写好,封装到.js文件里面,然后需要时调用. module.exports = { mtData: mtData, searchmtdata: searchmtdata, usedraw: usedraw } var mt_data = mtData() function searchmtd

  • 微信小程序之数据缓存的实例详解

    微信小程序之数据缓存的实例详解 前言: 在H5之前,缓存一般都是用cookie,但是cookie的存储空间太小.于是,H5增加了新的缓存机制,即localstorage 和 sessionstorage,具体的介绍就不在多说.在微信小程序中,数据缓存其实就和localstorage 的原理差不多,所以理解起来并不难.下面我们来一起实现一下. 效果图展示: 我们在index页面存入数字11,然后在跳转到新页面,在将缓存中的11取出渲染到当前页面.具体代码如下: index页面: <span sty

  • 微信小程序 用户数据解密详细介绍

    微信小程序 用户数据解密 官方指引图: 引导图一步一步操作 1.获取code onLoad: function (options) { // 页面初始化 options为页面跳转所带来的参数 let that = this wx.login({ success: function (res) { // success let code = res.code that.setData({ code: code }) wx.getUserInfo({ success: function (res)

随机推荐