微信小程序给input、picker、textarea编写统一的更新数据逻辑

wepy开发小程序

以input为例,微信小程序没有数据双向绑定,input要显示绑定的数据即value等于一个绑定的量

<input type="text" value="{{inputdata}}"/>
data = {
  inputdata: ‘数据‘
}

当在input中改变内容后,inputdata并不会变化,需要绑定事件,通过编写程序来改变inputdata。

但开发过程中如果input等表单控件很多的话,这些事件一个一个写就会感到很麻烦,所以编写一个程序来实现数据的绑定是大家都想实现的。

我实现的方法如下:

<input type="text" bindinput="inputeidt" data-obj="obj" data-item="item" value="{{obj.item}}"/>
inputeidt: function (e) {  let dataset = e.currentTarget.dataset  this[dataset.obj][dataset.item] = e.detail.value}

这样当input中输入内容时,数据也会发生改变。

这时虽然能实现数据随着视图变化,但对于数据的结构过于局限,只能是obj:{item: ‘’} 这样的,如果是这样的:

moreinfo: {  title: ‘详细信息‘,  get: ‘findDetailsByUserId‘,  save: ‘saveDetails‘,  item: {    name: {      name: ‘name‘,      title: ‘姓名‘,      type: ‘input‘,      value: ‘‘,      placeholder: ‘请填写‘,      required: true    },    sex: {      name: ‘sex‘,      title: ‘性别‘,      type: ‘picker‘,      value: ‘‘,      placeholder: ‘请选择‘,      required: true,      range: [        {          id: 1,          name: ‘男‘        },        {          id: 2,          name: ‘女‘        }      ]    }  }}绑定moreinfo.item.name.value就不行了,

我在解决时用了ES6的代理(写在onLoad中)
let self = this
self.saveinfo = new Proxy({}, {
  set: function (target, key, value, receiver) {// 给saveinfo中属性赋值前,可以令程序执行其他功能    self.moreinfo.item[key].value = value
    self.$apply()    return Reflect.set(target, key, value, receiver)  }})

项目中input是遍历出来的,遍历moreinfo.item

<input type="text"  wx:if="{{item.type === ‘input‘}}" bindinput="inputeidt" data-obj="saveinfo" data-item="{{item.name}}" value="{{item.value}}"/>

这样就实现了。上面的js要写在onLoad中,如果在data中写的话,会发生问题,当页面第二次打开时,saveinfo便不再是代理,而变成了{},结果便不能正常改变数据的值

原文地址:https://www.cnblogs.com/sgqwjr/p/9130744.html

时间: 2024-10-30 08:12:08

微信小程序给input、picker、textarea编写统一的更新数据逻辑的相关文章

微信小程序判断input是否为空

微信小程序中用到input值时候,判断其内容是否为空,可以用if-else判断内容的length,也可以给input加点击事件,判断其内容:以下是我解决问题的过程wxml代码 <view class="name"> <text>姓名</text> <input type='text' placeholder='收货人姓名' value="{{userName}}" bindblur='username'></in

获取微信小程序的input控件的value

习惯了vue的方式,我以为javascript世界默认是双向绑定的.可...微信小程序除外,虽然显示值还是value={{jsproperty}}.整个文档也没有直接告诉你怎么去获取一个input的录入值,这几乎是所有文档中仅次于"hello world"的说明了. 如何获取呢?大体上两种办法: 一是利用控件本身的事件,不断的刷新data里的某个属性值,常用是bindinput.bindblur.前者是录入时处理,后者是控件失去焦点时处理.如果每个控件都需要一个绑定的方法,这当然是可怕

微信小程序使用content-type等于x-www-form-urlencoded方式使用request请求数据

因为服务器只能接收x-www-form-urlencoded方式接收前端收到的数据 所以微信小程序开发的时候,必须鼓捣这个问题. 微信默认使用content-type是 application/json 用wx.request方法改掉header为x-www-form-urlencoded比较简单 wx.request({ 'content-type': 'application/x-www-form-urlencoded' }) 这么干就可以了. 但问题是,微信小程序,似乎不会把我们的数据自动

微信小程序从子页面退回父页面时的数据传递 wx.navigateBack()

我们知道,在微信小程序中,从一个页面转到另一个页面,一般情况下可以通过navigate或redirect时候的url来携带参数,然后在目标页面的onLoad函数参数中获取这些url参数.例如: // 源页面A相关代码 wx.navigateTo({ url: "/pages/mypage/mypage?a=1&b=2" }) // 目标页面B相关代码 Page({ onLoad: function (options) { var a = options.a; // 值:1 va

关于微信小程序多层嵌套渲染列表以及嵌套列表中数据的获取

起因:意图是想实现类似于安卓viewpager那样的效果,想到了用微信小程序的swiper组件,但如果每个swiper-item里都只用一个wx:for来渲染数据的话实在是太慢了,就想到多层嵌套数据渲染来提高效率. 直接上代码 wxml: <view wx:for="{{one}}" wx:key="id"> <view>----{{item.name}}----</view> <view wx:for="{{it

微信小程序如何把后台返回的多条json数据的时间戳转换为时间放到页面上 (微信小程序 时间戳转换为时间)

小程序端 在utils文件夹下的util.js写入 //时间戳转换时间   function toDate(number){   var n=number * 1000;   var date = new Date(n);   var Y = date.getFullYear() + '/';   var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '/';   var D = date

[小程序]微信小程序获取input并发送网络请求

1. 获取输入框数据wxml中的input上增加bindinput属性,和方法值在js部分定义与之对应的方法,只要在输入的时候,数据就会绑定调用到该方法,存入data属性变量中 2. 调用get请求发起网络请求调用wx.request发起网络请求 3.调用微信Toast接口展示结果 4.按钮绑定bindtap属性,当按钮点击的时候会调用对应的方法 index.wxml部分 <view class="indexInput"> <input maxlength="

微信小程序——picker通过value返回你想获取的值

关于微信小程序中的picker使用方法可以访问:picker-小程序 从它的官方文档中,可以看出它返回的value值是它range的下标: 在项目中,我们大多数时候传的值并不是需要这个下标,而是其他的值.像我项目中,需要获取到的是它对应的teamId,那么我们如何通过它的这个下标值返回你想要的值呢? 项目需求如下图: 步骤如下:  1.编写wxml文件 这是主要讲picker的功能,所以我只截了 picker 部分的wxml 代码了. 2.编写js文件 a). 定义data b). 赋值 c).

微信小程序获取输入框(input)内容

微信小程序---获取输入框(input)内容 wxml <input placeholder="请输入手机号码" maxlength="11" type="tel" bindinput="getInput" /> js Page({ data:{ getInput: null }, getInput:function(){//方法1 this.data.getInput = e.detail.value; }, /