微信小程序项目_秋泊优选74

69、意见反馈_删除图片

点击自定义图片组件

获取被点击的元素的索引
获取data中的图片数组
根据索引数组中删除对应的元素
把数组重新设置回data中

pages\feedback\index.wxml

<Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange">
    <view class="fb_main">
        <view class="fb_title">问题的种类</view>
        <view class="fb_tips">
            <text>功能建议</text>
            <text>购买遇到问题</text>
            <text>性能问题</text>
            <text>其他</text>
        </view>
        <view class="fb_content">
            <textarea placeholder="请描述一下您的问题"></textarea>
            <view class="fb_tool">
                <button bindtap="handleChooseImg">+</button> 
                <view class="up_img_item" 
                      wx:for="{{chooseImgs}}" 
                      wx:key="*this"
                      bindtap="handleRemoveImg"
                      data-index="{{index}}">
                 <UpImg src="{{item}}"></UpImg>
                </view>
            </view>
        </view>
        <view class="form_btn_wrap">
            <button>
               <icon type="success_no_circle" size="23" color="white"></icon>
               提交
            </button>    
        </view>
    </view>
</Tabs>

pages\feedback\index.js

  // 点击自定义图片组件 删除图片
  handleRemoveImg(e){
    // 2 获取被点击的组件的索引
    const {index}=e.currentTarget.dataset;
    // 3 获取data中的图片数组
    let {chooseImgs}=this.data;
    // 4 删除元素
    chooseImgs.splice(index,1);
    this.setData({
      chooseImgs
    })
  }