微信小程序实现动态添加或想删除输入框,参考wx:for列表渲染
搭配vantweapp使用,提高开发效率(例如已实现的步进器)
Stepper 步进器https://youzan.github.io/vant-weapp/#/stepper
关键:
- wx:for列表渲染每个item,达到增加删除的效果
- 绑定date-index自定义数据,作为下标传递
- 充分利用数据绑定和中间变量
- 事件event传参来获取确定的按钮或数据
实现效果:
解决办法:
wxml代码:
<view wx:for="{{inputList}}" wx:key="id">
<view>序号{{index+1}}</view>
<!-- 步进器 -->
<van-stepper value="{{ 1 }}" data-index="{{index+1}}" bind:change="numOnChange" />
<!-- 进价 -->
<text>进价¥</text>
<input placeholder="填入进价{{index+1}}" data-index="{{index+1}}"
bindinput="inpPurchase" value="{{item.purchaseValue}}"/>
<!-- 小计 -->
<view data-index="{{index+1}}">小计¥{{item.sell}}</view>
<!-- 添加删除按钮 -->
<button data-index="{{index+1}}" bindtap="addmore" type="primary">添加</button>
<button data-index="{{index+1}}" bindtap="delmore">删除</button>
</view>
JavaScript代码:
Page({
/** * 页面的初始数据 */
data: {
inputList: [{
value:1,//步进器的值
purchaseValue:null,//进价输入框的值
sell:0//小计view的值
}],
tempinpPurchase:0,//进价临时值
},
//增加按钮
addmore(e) {
console.log("增加")
console.log(e)
//简写变量书写
const {inputList} = this.data
const {dataset: {index}} = e.currentTarget
//splice方法来添加对象
//第一个参数是开始的下标,第二个参数是零为添加操作,第三个参数是添加的内容
inputList.splice(index, 0, {ghsValue:this.data.ghsValue,value:1,purchaseValue:null,sell:0})
//更新列表
this.setData({
inputList
})
},
//步进器改变事件
numOnChange(e){
console.log(e)
const {inputList} = this.data
const {dataset: {index}} = e.currentTarget
//e.detail步进器的值
console.log(e.detail)
//计算值=数量*中间值
console.log(Number(e.detail)*(this.data.tempinpPurchase))
console.log(this.data.inputList[index-1].sell)
//计算的小计赋值给inputList存储起来
inputList[index-1].sell=Number(e.detail)*(this.data.tempinpPurchase)
//数量赋值给inputList存储起来
inputList[index-1].value=Number(e.detail)
//更新列表
this.setData({
inputList
})
},
//输入进价事件
inpPurchase(e){
const {inputList} = this.data
const {dataset: {index}} = e.currentTarget
console.log(index)
//获取输入的值
console.log("输入的值:"+e.detail.value)
//将获取的输入值赋值给inputList存储起来
inputList[index-1].purchaseValue=e.detail.value
//更新中间变量tempinpPurchase
this.setData({
tempinpPurchase:e.detail.value
})
console.log(this.data.tempinpPurchase)
//计算出来的值
console.log(inputList[index-1].sell)
//计算出来的值=中间变量*数量
inputList[index-1].sell=this.data.tempinpPurchase*Number(inputList[index-1].value)
//更新列表
this.setData({
inputList:inputList
})
},
})
app.json代码:
"usingComponents": {
"van-stepper": "@vant/weapp/stepper/index"
}
如果对vantweapp这个微信小程序UI库安装不熟悉,给我评论留言吧
优化更新:https://blog.csdn.net/qq_44776950/article/details/107889137
本文地址:https://blog.csdn.net/qq_44776950/article/details/107853427