小程序实现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