您的位置:首页 > 汽车 > 新车 > 微信小程序--点击按钮可新增可删除

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

2024/11/17 4:39:48 来源: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',// 	  })},
})

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com