vue 分頁(yè) 加載 vue橫屏分頁(yè)加載
關(guān)鍵詞：橫著分頁(yè)，左右分頁(yè)，橫屏分頁(yè)，左右滑動(dòng)分頁(yè)

b站視頻地址：https://b23.tv/sEYwH5

切記一定要把public/index.html 里面的body設(shè)置margin、padding 為0，不然可能會(huì)出問(wèn)題

<template><div class="hello"><div class="list" id="tablist" @scroll="listScroll"><divclass="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, // 開(kāi)關(guān)loading: false, // loading加載datas: [1, 2, 3, 4, 5, 6], // 列表數(shù)據(jù)};},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) {// 列表寬度-屏幕寬度 = 卷曲寬度 且 開(kāi)關(guān)是打開(kāi)的狀態(tài)console.log("滑不動(dòng)了");this.pageFn(); // 模擬 請(qǐng)求數(shù)據(jù)}},pageFn() {console.log("去分頁(yè)請(qǐng)求**********");this.flag = false; // 開(kāi)關(guān) 關(guān)閉this.loading = true; // loading 打開(kāi)const that = this;// 模擬延遲請(qǐng)求setTimeout(() => {that.reqFn(); // 接口請(qǐng)求數(shù)據(jù)}, 1500);},reqFn() {const num = this.datas.length + 1; // 模擬新數(shù)據(jù)this.datas.push(num); // 新數(shù)據(jù)賦值this.flag = true; // 開(kāi)關(guān) 打開(kāi)this.loading = false; // loading 關(guān)閉},}, }; </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>

總結(jié)

以上是生活随笔為你收集整理的vue横屏分页加载 vue 分页 左右滑动分页 横着分页的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。