微信小程序点击按钮动态添加或删除输入框，点击步进器按钮获取输入框的值进行加减计算--不使用表单

微信小程序实现动态添加或删除输入框，参考wx:for列表渲染

搭配vantweapp使用，提高开发效率（例如已实现的步进器）
Stepper 步进器https://youzan.github.io/vant-weapp/#/stepper

关键：

1. wx:for列表渲染每个item，达到增加删除的效果
2. 绑定date-index自定义数据，作为下标传递
3. 充分利用数据绑定和中间变量
4. 事件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
    })
  },
  //删除按钮
  delmore(e){
    console.log("减少")
    console.log(e)
    //简化变量书写
    const {inputList} = this.data
    const {dataset: {index}} = e.currentTarget
    // console.log(index)
    //splice方法第一个参数为下标，第二个参数不为零，就删除指定个
    inputList.splice(index-1,1)
    // console.log(inputList)
    //更新列表
    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库安装不熟悉，给我评论留言吧