微信小程序--点击按钮可新增可删除

最新推荐文章于 2024-07-24 21:37:50 发布

鸭鸭梨吖

最新推荐文章于 2024-07-24 21:37:50 发布

阅读量63

点赞数

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_51494148/article/details/140665309

版权

案例：在这里插入图片描述
html:

  <view >
  <view >
	<view  class="guzhang" wx:for="{{inputs}}" wx:key="id" wx:for-item="item" wx:for-index="index">
		<view class="huanhang">
		  <view class="fontBold">故障描述{{index+1}}：</view>
		  <view class="fontBold"><text wx:if="{{!index== 0}}" class="carshanchu" bindtap="deleteInput" data-index="{{index}}">删除</text><text class="carinfor" bindtap='addInput'  data-index="{{index}}">添加</text></view>
		</view>
		<textarea class="textareb" maxlength="-1" data-id="{{item.id}}" bindinput='handleInput' placeholder="请输入故障描述"></textarea>
	  	  <view class="img-list">
			  <leePhoto value="{{item.licenseList}}" list="{{item.licenseList}}" name="etc" stype="3" type="editor" poiname="{{poiName}}" bindchange="updateList" data-index="{{index}}"></leePhoto>
	  	  </view>
	</view>
  </view>
  <view style="padding: 20px 10px 10px 10px;box-sizing: border-box;">
    <view class="jianjiaguzhang fontSize32" bindtap="Jumpto">申请配件</view>
  </view>
</view>

js:

Page({

  /**
   * 页面的初始数据
   */
  data:{
	  licenseList:[],
	  licenseListStr:"",
     inputs: [{}],
     Values:[],
	 inputValues: [],
  },
     addInput: function () {
        const newInput = {
          id: Date.now(),
          value: '',
		  licenseList:"",
		  licenseListStr: "",
        };
        this.setData({
          inputs: [...this.data.inputs, newInput],
        });
      },
      deleteInput: function (e) {
        const index = e.currentTarget.dataset.index;
        const inputs = [...this.data.inputs];
        inputs.splice(index, 1);
        this.setData({
          inputs,
        });
      },
      handleInput: function (e) {
        const id = e.currentTarget.dataset.id;
        const value = e.detail.value;
        const inputs = [...this.data.inputs];
        const inputIndex = inputs.findIndex((input) => input.id === id);
        inputs[inputIndex].value = value;
        this.setData({
          inputs,
        });
      },
	updateList: function (event) {
	  const index = event.currentTarget.dataset.index; // 获取当前操作的 input 的索引
	  const { list } = event.detail;
	  const inputs = [...this.data.inputs];
	  const inputItem = inputs[index];
	  const arr = list.map(item => item.imgPath);
	  inputItem.licenseList = list;
	  inputItem.licenseListStr = arr.join(',');
	  this.setData({
	    inputs
	  });
	},
	Jumpto: function() {
	  const inputs = this.data.inputs;
	  const values = inputs.map(input => input.value);
	  const licenseLists = inputs.map(input => input.licenseList);
	  const licenseListStrs = inputs.map(input => input.licenseListStr);
	  this.setData({
	    inputValues: values.join(','),
	    licenseLists,
	    licenseListStrs
	  });
	  console.log(this.data.inputs,'获取到的数据');
	  // 	  wx.navigateTo({
	  // 	    url: '/pages/MainApproval/accessories/accessories',
	  // 	  })
	  },
})