vue横屏分页加载 vue 分页 左右滑动分页 横着分页

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>