vue 分页 加载 vue横屏分页加载
关键词:横着分页,左右分页,横屏分页,左右滑动分页
b站视频地址:https://b23.tv/sEYwH5
切记一定要把public/index.html 里面的body设置margin、padding 为0,不然可能会出问题
<template>
<div class="hello">
<div class="list" id="tablist" @scroll="listScroll">
<div
class="item"
v-for="(item, i) in datas"
:key="i"
:class="i % 2 == 0 ? 'red' : 'skyblue'"
>
{{ item }}
</div>
<div v-if="loading" class="loading">loading...</div>
</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
data() {
return {
flag: true, // 开关
loading: false, // loading加载
datas: [1, 2, 3, 4, 5, 6], // 列表数据
};
},
methods: {
listScroll() {
const scrollLeft = document.getElementById("tablist").scrollLeft;
console.log("卷去宽度", scrollLeft);
const clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
console.log("屏幕宽度", clientWidth);
const tablist = document.getElementById("tablist").scrollWidth;
console.log("列表宽度", tablist);
console.log("-----------");
if (tablist - clientWidth === scrollLeft && this.flag) {
// 列表宽度-屏幕宽度 = 卷曲宽度 且 开关是打开的状态
console.log("滑不动了");
this.pageFn(); // 模拟 请求数据
}
},
pageFn() {
console.log("去分页请求**********");
this.flag = false; // 开关 关闭
this.loading = true; // loading 打开
const that = this;
// 模拟延迟请求
setTimeout(() => {
that.reqFn(); // 接口请求数据
}, 1500);
},
reqFn() {
const num = this.datas.length + 1; // 模拟新数据
this.datas.push(num); // 新数据赋值
this.flag = true; // 开关 打开
this.loading = false; // loading 关闭
},
},
};
</script>
<style scoped>
.list {
width: 100vw;
height: 100px;
overflow-x: scroll;
white-space: nowrap;
}
.item {
display: inline-block;
width: 100px;
height: 100px;
box-sizing: content-box;
line-height: 100px;
}
.red {
background-color: red;
}
.skyblue {
background-color: skyblue;
}
.loading {
width: 80px;
height: 100px;
line-height: 100px;
background: rgba(0, 0, 255, 0.664);
display: inline-block;
}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
} */
</style>