小程序實現item列表左右滑動刪除等操作（附源碼）

效果

項目地址:

項目中使用了color-ui的ui庫方便樣式

https://gitee.com/maxiaodong1996/list.git

一、index.js

const app = getApp()
let allList = [];
Page({
  data: {
    dataShow: [{
      "id": "5ce531ed5e577135fd0f8a33",
      "province": "江西",
      "university": "江西農業大學",
      "place": "大學生活動中心205多媒體教室",
      "company": "中國平安人壽保險股份有限公司上海電話銷售中心                    ",
      "time": "08:00",
      "url": "https://xjh.haitou.cc/article/804667.html",
      "right": 0,
      "left": 0
    }, {
      "id": "5ce531ed5e577135fd0f8a68",
      "province": "天津",
      "university": "南開大學",
      "place": "(八里臺校區)學生活動中心415&420",
      "company": "榮盛房地產發展股份有限公司                    ",
      "time": "08:00",
      "url": "https://xjh.haitou.cc/article/805369.html",
      "right": 0,
      "left": 0
    }, {
      "id": "5ce531f05e577135fd0f8bb4",
      "province": "河南",
      "university": "河南師範大學",
      "place": "西校區田家炳樓405",
      "company": "三河市教育和體育局招聘高中教師                    ",
      "time": "08:30",
      "url": "https://xjh.haitou.cc/article/806731.html",
      "right": 0,
      "left": 0
    }, {
      "id": "5ce531f15e577135fd0f8c24",
      "province": "湖北",
      "university": "武漢工程大學",
      "place": "流芳校區一教L1101",
      "company": "中國平安人壽保險股份有限公司上海電話銷售中心                    ",
      "time": "08:30",
      "url": "https://xjh.haitou.cc/article/803720.html",
      "right": 0,
      "left": 0
    }, {
      "id": "5ce531f15e577135fd0f8c2d",
      "province": "陝西",
      "university": "西北大學",
      "place": "長安校區就創中心宣講廳四",
      "company": "瓊海市人力資源和社會保障局                    ",
      "time": "08:30",
      "url": "https://xjh.haitou.cc/article/804088.html",
      "right": 0,
      "left": 0
    }, {
      "id": "5ce531f45e577135fd0f8e0a",
      "province": "陝西",
      "university": "西北大學 ",
      "place": "長安校區就創中心宣講廳四",
      "company": "瓊海市人力資源和社會保障局",
      "time": "08:30",
      "url": "http://jyglxt.nwu.edu.cn:80/Pro_StudentEmploy/StudentJobFair/JobFairSingle_Detail.aspx?JobId=f460e12c-afc7-4b40-808f-1197d89bfa33",
      "right": 0,
      "left": 0
    }, {
      "id": "5ce54195c2b2693d249e2747",
      "province": "湖北",
      "university": "長江大學",
      "place": "東校區就業中心104洽談室",
      "company": "十堰市科技學校2019年招聘                    ",
      "time": "08:30",
      "url": "https://xjh.haitou.cc/article/807046.html",
      "right": 0,
      "left": 0
    }, {
      "id": "5ce531ed5e577135fd0f8a02",
      "province": "廣西",
      "university": "桂林理工大學",
      "place": "屏風校區校園招聘中心宣講室(圖書館一樓南側)",
      "company": "桂林三金大健康產業有限公司專場招聘會                    ",
      "time": "09:00",
      "url": "https://xjh.haitou.cc/article/803565.html",
      "right": 0,
      "left": 0
    }, {
      "id": "5ce531ed5e577135fd0f8a70",
      "province": "天津",
      "university": "南開大學",
      "place": "(八里臺校區)學生活動中心206",
      "company": "河海大學                    ",
      "time": "09:00",
      "url": "https://xjh.haitou.cc/article/805408.html",
      "right": 0,
      "left": 0
    }, {
      "id": "5ce531ee5e577135fd0f8ae5",
      "province": "浙江",
      "university": "浙江工商大學",
      "place": "A124",
      "company": "溫州立可達印業股份有限公司                    ",
      "time": "09:00",
      "url": "https://xjh.haitou.cc/article/806675.html",
      "right": 0,
      "left": 0
    }], //展示的數據
    isScroll: true,
    bottomTop: 30,
    windowHeight: 0,
    delBtnWidth: 160,
    loading: false
  },

  /**
   * 數據初始化的時候加載假數據
   */
  onLoad: function() {
    let that = this;
  },

  /**
   * 開始滑動的時候 獲取點擊位置處理所有數據的right全部爲0
   */
  drawStart: function(e) {
    var touch = e.touches[0]
    for (var index in this.data.dataShow) {
      var item = this.data.dataShow[index]
      item.right = 0
      item.left = 0
    }
    this.setData({
      dataShow: this.data.dataShow,
      startX: touch.clientX,
    })

  },
  /**
   * 移動的時候獲取當前移動位置 使用滑動位置減去移動位置
   * 
   * 如果滑動的距離
   */
  drawMove: function(e) {
    var touch = e.touches[0]
    var item = this.data.dataShow[e.currentTarget.dataset.index]
    var disX = this.data.startX - touch.clientX
    // //滑動的距離大於後會比較滑動的距離是不是大於button的距離 
    if (disX >= 80) {
      item.right = 160
      item.left = -160
      //滑動出去以後不可以再滑動
      this.setData({
        isRight: true,
        isLeft: false,
        isScroll: false,
        dataShow: this.data.dataShow
      })
    } else if (disX <= -80) {
      item.right = -160
      item.left = 160
      //滑動出去以後不可以再滑動
      this.setData({
        isLeft: true,
        isRight: false,
        isScroll: false,
        dataShow: this.data.dataShow
      })
    } else {
      //這裏就表示已經滑動出來的按鈕不可見
      item.right = 0
      item.left = 0
      this.setData({
        isScroll: true,
        dataShow: this.data.dataShow
      })
    }
  },
  /**
   * 拖動結束後
   * 如果拖動的距離大於等於button的一半那麼就設置item的滑動距離等於button
   */
  drawEnd: function(e) {
    var item = this.data.dataShow[e.currentTarget.dataset.index]
    if (this.data.isRight) {
      console.error("item.right" + item.right);
      if (item.right >= 80) {
        item.right = 160
        item.left = -160
        this.setData({
          isScroll: true,
          dataShow: this.data.dataShow,
        })
      } else {
        item.right = 0
        item.left = 0
        this.setData({
          isScroll: true,
          dataShow: this.data.dataShow,
        })
      }
    }
    if (this.data.isLeft) {
      console.error(item.left);
      if (item.left >= 80) {
        item.right = -160
        item.left = 160
        this.setData({
          isScroll: true,
          dataShow: this.data.dataShow,
        })
      } else {
        item.right = 0
        item.left = 0
        this.setData({
          isScroll: true,
          dataShow: this.data.dataShow,
        })
      }
    }

  },
  delItem: function(e) {},
})

二、index.wxml

<view class='pageTop'>
  <scroll-view scroll-y="{{isScroll}}" enable-back-to-top='true' bindscrolltolower='lower' bindscrolltoupper='upLoad' style='overflow: scroll;-webkit-overflow-scrolling:touch;'>
    <block wx:key="index" wx:for="{{dataShow}}">
      <view data-index='{{index}}' class="order-item" bindtouchstart="drawStart" bindtouchmove="drawMove" bindtouchend="drawEnd" style="right:{{item.right}}rpx;left:{{item.left}}rpx">
        <view class="contentBody shadow-warp" bindtap='goDetails' data-id='{{item.id}}'>
          <view class='title'>
            {{item.company}}
          </view>
          <view class='time'>
            {{item.time}}
          </view>
          <view class='title'>
            <text>{{item.university}}</text>
            <view>{{item.place}}</view>
          </view>
        </view>
        <view class="remove" bindtap="delItem">取消</view>
        <view class="left" bindtap="delItem">完成</view>
      </view>
    </block>
    <view wx:if='{{noData}}' class="noData">沒有更多了~</view>
  </scroll-view>
</view>

三、index.wxss

.pageTop {
  position: fixed;
  width: 100%;
  height: 100%;
}

scroll-view {
  height: 100%;
  overflow: scroll;
}

/*循環周天樣式  End*/

.contentBody {
  width: 94%;
  background: white;
  margin-left: 3%;
  margin-right: 3%;
  border-radius: 8px;
  border: 1px solid white;
  margin-top: 3%;
  padding-bottom: 12px;
}

.title {
  margin-top: 8px;
  margin-left: 22%;
}

.origin {
  margin-top: 8px;
  margin-left: 10%;
  font-size: 10px;
}

.originInfo {
  margin-left: 7%;
  font-size: 10px;
}

.time {
  text-align: left;
  width: 100%;
  margin-left: 16px;
  font-size: 16px;
}

.noData {
  width: 96%;
  margin-left: 2%;
  margin-right: 2%;
  border-radius: 8px;
  padding-top: 30px;
  padding-bottom: 16px;
  text-align: center;
}

.scroll-view {
  height: 100px;
  background-color: #313751;
  width: 100%;
  white-space: nowrap;
}

.switch_info {
  margin-left: 24rpx;
}

.cuIcon-back {
  display: none;
}

.total {
  color: black;
  margin-left: 22%;
}

.showNumInfo {
  display: flex;
  text-align: left;
  background-color: #fff;
  height: 40px;
  width: 100%;
  z-index: 1;
  padding-top: 15rpx;
  position: fixed;
}

.item {
  height: 90%;
  display: inline-block;
}

.text-view {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  color: #fff;
}

.order-item {
  width: 100%;
  position: relative;
  display: flex;
}

.remove {
  margin-bottom: 12px;
  margin-top: 12px;
  border-radius: 8px;
  /* transform: translateX(10%); */
  width: 170rpx;
  height: 92%;
  background-color: #313751;
  color: white;
  position: absolute;
  top: 0;
  right: -170rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left {
  margin-bottom: 12px;
  margin-top: 12px;
  border-radius: 8px;
  /* transform: translateX(10%); */
  width: 170rpx;
  height: 92%;
  background-color: #313751;
  color: white;
  position: absolute;
  top: 0;
  left: -170rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

以上是核心代碼 具體的可以下載項目看https://gitee.com/maxiaodong1996/list.git