<view class="user_infolist" wx:for="{{user_infolist}}" wx:for-index="i">
<!-- bindtap="{{item.listTap}}" -->
<view class="user_infobox {{item.list_id}}" data-oldval="{{item.theTxt}}" data-setid="{{i}}" bindtap="{{item.listTap}}">
<view class="info_left">{{item.theTit}}</view>
<view class="info_right"><text>{{item.theTxt}}</text><image src="{{item.moreicon}}" mode="widthFix"></image> </view>
</view>
</view>
<van-popup show="{{show}}" position="right" overlay="{{true}}" bind:close="onClose" duration="400" custom-style="width:100%;height:100%;background:#ffffff;" >
<view class="pobox">
<view class="inputbox">
<input bindinput="getvalue" value="{{inputValue}}" />
</view>
<button bindtap="savebtn" data-btnid="{{i}}">保存</button>
</view>
</van-popup>
/* 弹出层 */
.pobox{
width: 100%;
height: 100%;
background: #f2f2f4;
position: absolute;
left: 0;
top: 0;
}
.inputbox{
width: 100%;
background: #ffffff;
font-size: 26rpx;
line-height: 80rpx;
padding: 0 10rpx;
margin-top: 30rpx;
}
.inputbox input{
width: 100%;
line-height: 80rpx;
height: 80rpx;
}
.pobox button{
width: 180rpx;
height: 70rpx;
font-size: 26rpx;
color: #ffffff;
background: #07c160;
margin: 0 auto;
margin-top: 30rpx;
padding: 0;
outline: none;
line-height: 70rpx;
border-radius: 8rpx;
}
data:{
user_infolist:[
{
theTit: "姓名",
theTxt:"王某某",
list_id:"name",
listTap: "openpopup",
},
],
show: false,
inputValue: "1", //input的value值
backValue: "", //input改变返回的value值
},
openpopup:function(e){
var getVal = e.currentTarget.dataset.oldval //携带的值
var setVal = 'inputValue'
this.setData({
backValue: "", // 初始化input改变返回的value值 否则该值为上一个修改的backValue
[setVal]: getVal, // 把携带的值赋给input
show: true, //打开弹出层
btnid: e.currentTarget.dataset.setid //把携带的id赋值到全局
});
},
// input改变时的的值
getvalue:function(e){
var inputVal = e.detail.value; //input改变时的value值
var bkval = 'backValue'; //定义一个全局变量 input改变返回的value值
console.log(this.data.backValue)
console.log(inputVal)
this.setData({
[bkval]: inputVal
});
},
savebtn:function(e){
var btnid = this.data.btnid //获取到 打开弹出层时传递的id
var getval = this.data.backValue; //获取到input返回的value值
var oldcont = this.data.user_infolist[btnid].theTxt; //获取到内容位置
var cont = "user_infolist["+btnid+"].theTxt"; //找到数组中这个id下的属性名
if (getval==""){ //判断input的值是否做出改变
console.log("未修改")
this.setData({ //关闭弹窗 并将原有值赋给自己
cont : oldcont,
show: false,
})
}else{
console.log("修改了")
this.setData({ //关闭弹窗 并将修改的值赋给自己
show: false,
[cont]: getval,
// backValue:""
});
}
},
onClose() {
this.setData({
show: false,
});
},