介绍：这是一个上拉加载下拉刷新的列表，外加左滑删除。废话不多说，直接上代码！！！！
<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>效果图：
