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

拼搏现实的明天。 2022-11-03 11:17 20阅读 0赞

vue 分页 加载 vue横屏分页加载  
关键词：横着分页，左右分页，横屏分页，左右滑动分页

**b站视频地址：[https://b23.tv/sEYwH5][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>
    
    
    
    
    <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>

[https_b23.tv_sEYwH5]: https://b23.tv/sEYwH5