在微信小程序开发中数据与页面的绑定是靠data对象来实现的。如果要修改页面中某个变量的值,就需要使用this.setData({变量名:值})。
话不多说例子如下:
test.wxml:
<view wx:for="{{ editData }}" wx:key="index" data-index="{{ index }}"> <view class="list-item flex"> <view class="left">收货人:</view> <view class="right"> <input type="text" placeholder="请填写收货人" value="{{ item.userName }}" bindconfirm="onSave" bindinput="setUserName"/> </view> </view> <view class="list-item flex"> <view class="left">联系电话:</view> <view class="right"> <input type="text" placeholder="请填写手机号" value="{{ item.userTell }}" bindconfirm="onSave" bindinput="setUserTell"/> </view> </view> <view class="list-item flex"> <view class="left">所在地区:</view> <view class="right"> <input type="text" placeholder="请填写所在地" value="{{ item.area }}" bindconfirm="onSave" bindinput="setUserArea"/> </view> </view> <view class="list-item flex top"> <view class="left">详细地址:</view> <view class="right"> <textarea placeholder-class="init-textarea" placeholder="请输入收货地址" value="{{ item.address }}" bindconfirm="onSave" bindinput="setAddress"></textarea> </view> </view> </view>
test.js:
Page({ data: { editData: [], publick:{ // 对象实例 userName: '', userTell: '', area: '', address: '', }, }, onl oad(options) { let userData = JSON.parse(options.userData); let editData = this.data.editData; editData.push(userData) // console.log(editData) let obj = {} // 当内容未修改时,可以通过校验 obj.userName = editData[0].userName, obj.userTell = editData[0].userTell, obj.area = editData[0].area, obj.address = editData[0].address this.setData({ editData: editData, publick: obj }) }, // 用户名称 setUserName(e){ let userName = "publick.userName" this.setData({ [userName]: e.detail.value // 修改实例对象 }) }, // 用户手机号 setUserTell(e){ let userTell = "publick.userTell" this.setData({ [userTell]: e.detail.value }) }, // 用户所在地 setUserArea(e){ let area = "publick.area" this.setData({ [area]: e.detail.value }) }, // 用户详细地址 setAddress(e){ let address = "publick.address" this.setData({ [address]: e.detail.value }) }, // 保存内容 onSave(e){ // console.log(this.data.publick.userTell) let phonereg = /^1(3|4|5|7|8)\d{9}$/; let userTell = this.data.publick.userTell if(userTell == ''){ wx.showToast({ title: '请输入手机号', icon: 'none', }); return; } else if(!phonereg.test(userTell)){ wx.showToast({ title: '手机号输入错误', icon: 'none', }); return; } else { let editObj = JSON.stringify(this.data.publick) wx.navigateTo({ url: '/mallPages/pages/addressList/addressList?editObj=' + editObj, }) } }, })
注意(重点主要是这个位置如何获取的值,如何绑定的值):
setUserName(e){ let userName = "publick.userName" this.setData({ [userName]: e.detail.value // 修改实例对象 }) },
内容参考:https://www.jianshu.com/p/6724e0cc466c