微信小程序list列表删除功能

本章介绍微信小程序列表删除功能怎么实现，其实不必去把它想的很复杂，只要你深刻理解了微信小程序几乎没有你写不出来的逻辑

首先点击就要有点击事件，我们通过bindtap=" 事件名称 "方法给每个元素绑上一个点击事件

 <image src="./../../images/my/delete.png" class="del" bindtap="del" />

=============>
js对应绑定的事件名，无需写在生命周期函数下，只需包裹在Page({})下即可，为了更加美观这里我还用到了wx.showModel给用户一个友好的提示

del(e){
   wx.showModal({
     title: '提示',
     content: '确认要删除此足迹么？',
     success: (res)=> {
       if (res.confirm) {
         console.log('用户点击确定')
         this.data.footprint.splice(e.currentTarget.dataset.index, 1)
         this.setData({
           footprint: this.data.footprint
         })
       } else if (res.cancel) {
         console.log('用户点击取消')
       }
     }
   })
 },

del.jpg

其实我们可以看到删除操作我也只是通过setData({})方法重定义了data数据，选择到当前点击的索引删除一位，这只是让渲染层，也就是视图层发生了变化，实际开发中我们还需要发送request请求让后端数据同步删除

==========================
下面附上全部源码(不含request)：

wxml:

<scroll-view scroll-y="{{true}}" class="scroll-list">
    <text class="date">{{time}}</text>
        <view class="list-box b-line"  wx:for="{{footprint}}" data-index="{{index}}" wx:item="item" wx:key>
            <view class="list-item" data-index="{{index}}" >
                <view class="content">
                    <image src="" class="coverImage"/>
                    <div class="inner">
                        <text class="title">{{item.title}}</text>
                        <text class="subtitle">{{item.subtitle}}</text>
                    </div>
                </view>
                <image src="./../../images/my/delete.png" class="del" bindtap="del"  data-index="{{index}}"/>
            </view>
        </view>
</scroll-view>

wxss:

.scroll-list{
    height: 100%;
}
.date{
    font-size:14px;
    color: #eee;
}
.list-box{
    width: 100%;
    padding: 0;
}
.list-item{
    height: 150rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s;
}
.list-item .content{
    width: 80%;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.list-item .content .coverImage{
    display: block;
    width: 150rpx;
    height: 150rpx;
    background: #eeeeee;
    float: left;
}
.list-item .content .inner{
    float: left;
    padding-left:25rpx;
}
.list-item .del{
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    right:20rpx;
    bottom:20rpx;
}

js:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    time:"2019-05-01",
    footprint:[
      {
        "id": 1,
        "title": "企业贷款",
        "subtitle": null,
        "coverImage": null,
        "insertTime": "2019-05-01 11:11:11"
      },
      {
        "id": 2,
        "title": "二手车分期",
        "subtitle": "业务办理-在线咨询",
        "coverImage": "http://xxx.jpg",
        "insertTime": "2019-05-01 11:11:11"
      },

    ],
    active:false,
  },

  del(e){
    wx.showModal({
      title: '提示',
      content: '确认要删除此足迹么？',
      success: (res)=> {
        if (res.confirm) {
          console.log('用户点击确定')
          this.data.footprint.splice(e.currentTarget.dataset.index, 1)
          this.setData({
            footprint: this.data.footprint
          })
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

})