h5+Vant左滑删除

时间:2024-05-05 07:12:24

介绍:这是一个上拉加载下拉刷新的列表,外加左滑删除。废话不多说,直接上代码!!!!

<template>
  <div class="info-list">
    <div class="top-bar">
      <van-nav-bar
        title="物料清单"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="main">
      <div class="content-wrap">
        <van-pull-refresh style="height: 100%;" v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div class="data-list-wrap" v-for="(item, index) in list" :key="index" data-type="0">
              <div class="top-data-list" @touchstart.capture="touchStart" @touchend.capture="touchEnd"  @click="oneself">
                <div class="title-box">
                  <span class="top-title">名字</span>
                </div>
                <div class="content-box">
                  <div class="content-area" style="width: 60%;">
                    <span class="content-text">集团编码:{{ index }}</span>
                    <span class="content-text">物料规格:{{ index }}</span>
                    <span class="content-text">系统编码:{{ index }}</span>
                    <span class="content-text">图样:{{ index }}</span>
                    <span
                      class="content-text">仓库位置:xxx</span>
                    <span
                      class="content-text">车间位置:xxx</span>
                  </div>
                </div>
              </div>
              <div class="removeBtn" @click="remove" :data-index="index">删除</div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script>
import {NavBar, PullRefresh,List, Popup, Picker, Toast} from 'vant'
  export default {
    name: 'infoList',
    components: {
      [NavBar.name]: NavBar,
      [PullRefresh.name]: PullRefresh,
      [List.name]: List
    },
    data () {
      return {
        refreshing: false,
        list: [],
        loading: false,
        finished: false,
        startX: 0, //滑动开始
        endX: 0, //滑动结束
      }
    },
    methods: {
      onClickLeft () {
        this.$router.back()
      },
      // 下拉刷新
      onRefresh() {
        const _that = this
        setTimeout(() => {
          this.$toast('刷新成功');
          _that.refreshing = false;
        }, 500);
      },
      onLoad() {
        // 异步更新数据
        setTimeout(() => {
          for (let i = 0; i < 10; i++) {
            this.list.push(this.list.length + 1);
          }
          // 加载状态结束
          this.loading = false;

          // 数据全部加载完成
          if (this.list.length >= 40) {
            this.finished = true;
          }
        }, 500);
      },
      //滑动开始
      touchStart(e) {
        // 记录初始位置
        this.startX = e.touches[0].clientX;
      },
      // 向左滑动出现删除按钮时,点击非删除区域则关闭左滑
      oneself() {
        if (this.checkSlide()) {
          this.restSlide();
        } else {
          console.log("点击每一条");
        }
      },
      //滑动结束
      touchEnd(e) {
        // 当前滑动的父级元素
        let parentElement = e.currentTarget.parentElement;
        // 记录结束位置
        this.endX = e.changedTouches[0].clientX;
        // 左滑大于30距离删除出现
        if (parentElement.dataset.type == 0 && this.startX - this.endX > 30) {
          this.restSlide();
          parentElement.dataset.type = 1;
        }
        // 右滑
        if (parentElement.dataset.type == 1 && this.startX - this.endX < -30) {
          this.restSlide();
          parentElement.dataset.type = 0;
        }
        this.startX = 0;
        this.endX = 0;
      },
      //判断当前是否有滑块处于滑动状态
      checkSlide() {
        let listItems = document.querySelectorAll(".data-list-wrap");
        for (let i = 0; i < listItems.length; i++) {
          if (listItems[i].dataset.type == 1) {
            return true;
          }
        }
        return false;
      },
      //复位滑动状态
      restSlide() {
        let listItems = document.querySelectorAll(".data-list-wrap");
        // 复位
        for (let i = 0; i < listItems.length; i++) {
          listItems[i].dataset.type = 0;
        }
      },
      //删除数据信息
      remove(e) {
        console.log('删除');
        // 当前索引值
        let index = e.currentTarget.dataset.index;
        // 复位
        this.restSlide();
      },
    }
  }
</script>

<style lang="scss" scoped>
.info-list {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  .top-bar {
    width: 100%;
    height: 2.9rem;
  }
  .main {
    width: 100%;
    height: calc(100% - 2.9rem);
    background-color: #fff;
    padding: 0 10px;
    box-sizing: border-box;
    .content-wrap {
      width: 100%;
      height: 100%;
      overflow: auto;
      .van-pull-refresh {
        overflow: auto;
      }
      .van-list {
        overflow: hidden;
      }
      .data-list-wrap {
        width: 100%;
        border-radius: 5px;
        // overflow: hidden;
        background-color: #fff;
        padding: 0 10px;
        box-sizing: border-box;
        background-color: #fafafa;
        border: 3px solid #fafafa;
        margin: 10px 0;
        & {
          /* 全部样式 0.2秒 缓动*/
          transition: all 0.2s;
        }
        .top-data-list {
          width: 100%;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: space-between;
          padding-bottom: 6px;

          .title-box{
            width: 100%;
            display: flex;
            justify-content: start;
            .top-title {
              font-size: 18px;
              font-weight: 700;
              display: block;
              margin: 10px 0;
            }
          }
          .content-box{
            width: 100%;
            display: flex;
            justify-content: start;

            .content-area{
              width: 50%;
              overflow: hidden;
            }

            .content-text {
              width: 100%;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              font-size: 15px;
              color: #c6c6c6;
              display: block;
              line-height: 2;
            }

            .content-img {
              width: 100%;
              height: 100%;
              position: relative;
              display: flex;
              align-items: center;
              justify-content: center;

              img{
                width: 60%;
              }
            }
          }
        }
        /* =0隐藏 */
        &[data-type="0"] {
          transform: translate3d(0, 0, 0);
        }

        /* =1显示 */
        &[data-type="1"] {
          /* -64px 设置的越大可以左滑的距离越远,最好与下面删除按钮的宽度以及定位的距离设置一样的值*/
          transform: translate3d(-70px, 0, 0);
        }
        .bottom-data-list {
          width: 100%;
          height: 15%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-top: 1px solid #ccc;

          .bottom-left-text {
            font-size: 15px;
            color: #fff;
            padding: 2px 5px;
            background-color: #969a9e;
            border-radius: 5px;
          }

          .bottom-center-text {
            font-size: 15px;
            color: #fff;
            padding: 2px 5px;
            background-color: #1989fa;
            border-radius: 5px;
          }

          .bottom-right-text {
            font-size: 15px;
            color: #7b7b7b;
          }
        }
        .removeBtn {
          width: 65px;
          height: 100%;
          background: #ff4949;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          color: #fff;
          position: absolute;
          top: 0px;
          right: -70px;
          text-align: center;
          border-radius: 2px;
        }
      }
    }
  }
}
</style>

效果图: