(小程序篇)9.滑动删除

说明：本案例结合lin-ui框架，实现滑动点击删除按钮，删除数据。

1.引入SlideView组件

.json

"usingComponents": {
  "l-slide-view": "../../miniprogram_npm/lin-ui/slide-view"
}

2.组件的引入和样式

.wxml

<view class="slide">
  <block wx:for="{{list}}" wx:key="index">
    <l-slide-view auto-close="{{true}}" bind:lintap="del" data-index="{{index}}" height="140" width="750" slide-width="140">
      <view slot="left" class="left">
        {{item.desc}}
      </view>
      <view slot="right" class="right">
        <text>删除</text>
      </view>
    </l-slide-view>
  </block>
</view>

.wxss

.slide{
  margin-top:20rpx;
}
.left{
  background: #fff;
  line-height: 120rpx;
  height: 120rpx;
}
.right{
  background:#f00;
  color:#fff;
  text-align: center;
  line-height: 120rpx;
}

3.构建数组和删除操作

.js

list: [
    {desc:'这是一个描述',num:1},
    {desc:'我是很简单描述',num:2},
    {desc:'我有点厉害的描述',num:1},
    {desc:'很棒的描述',num:3},
    {desc:'一条加油的描述',num:4}
  ]
},
// 删除
del(e){
  let index = e.currentTarget.dataset.index;
  let list = this.data.list;
  list.splice(index, 1)
  this.setData({
    list
  })
}

4.效果展示