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"><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, // 開關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>

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。