uniapp列表滑动操作（删除、编辑）

本篇文章结合了下拉刷新、上拉加载，以及每一条列表的左滑删除，这里的header和footer盒子样式我就不写了，光写了main。是上中下布局，中间是内容，废话不说了，直接上代码！

<template>
  <view class="wrap">
    <view class="header">
      ....
    </view>
    <view class="main">
      <scroll-view scroll-y class="scrollbox" @scrolltolower="lower" refresher-enabled="true"
        :refresher-triggered="trigger" @refresherrefresh="refresherrefresh" show-scrollbar="false">
        <uni-swipe-action>
          <uni-swipe-action-item
            v-for="(item, index) in 20"
            :right-options="options"
            @change="swipeChange($event, index)"
            @click="swipeClick($event, index)"
          >
          
            <text style="line-height: 40px;display: block;margin: 0 0 10px 0; background-color: aqua;">{{index}}</text>
 
          </uni-swipe-action-item>
        </uni-swipe-action>
        <!-- 加载更多 -->
        <view>
          <view class="loading-text" v-if="loadingFlag == 1">数据加载中...</view>
          <view class="loading-text" v-if="loadingFlag == 2">没有更多的数据...</view>
        </view>
      </scroll-view>
    </view>
    <view class="footer">
      ....
    </view>
  </view>
</template>
 
<script>
export default {
  data () {
    return {
      // 上拉刷新、下拉加载
      trigger: false,
      loadingFlag: 1,
      // 左滑删除
      options: [{
        text: '取消',
        style: {
          backgroundColor: '#007aff'
        }
      }, {
        text: '确认',
        style: {
          backgroundColor: '#dd524d'
        }
      }]
    }
  },
  methods: {
    // 上拉加载
    lower () {
      console.log('触底加载11')
    },
    // 下拉刷新
    refresherrefresh () {
      const _that = this
      this.trigger = true
      setTimeout(() => {
        _that.trigger = false
      }, 3000)
    },
    // 左滑删除
    swipeClick (e) {
      console.log('点击了' + (e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮')
    },
    swipeChange (e, index) {
      console.log('当前状态：' + e + '，下标：' + index)
    }
  }
}
</script>
 
<style lang="scss" scoped>
.wrap {
  width: 100vw;
  height: 100vh;
  .header {
    // 这里的样式我就不写了
  }
  .main {
    width: 100%;
    height: calc(100vh - 50px - 50px);
    background-color: pink;
    overflow: auto;
    // 这个是scroll-view的盒子样式，必须要有，要不然不会触发 触底滚动事件
    .scrollbox {
      width: 100%;
      height: 100%;
    }
    // 加载更多
    .loading-text {
      font-size: $uni-size-loading-text;
      text-align: center;
      line-height: 30px;
      background-color: yellow;
    }
    // 左滑删除
    .uni-swipe {
      height: 40px !important;
      margin: 10px 0;
      .uni-swipe_box {
        height: 100%;
      }
    }
  }
  .main {
    // 这里的样式我就不写了
  }
}
</style>