Vue移动端横向拖拽加载

最新推荐文章于 2024-09-25 00:17:06 发布

_小郑有点困了

最新推荐文章于 2024-09-25 00:17:06 发布

阅读量401

点赞数 1

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_44706619/article/details/130357510

版权

vue 专栏收录该内容

81 篇文章

订阅专栏

功能背景

项目需要在移动端显示横向的列表卡片，但是又是海量数据，做了分页，于是乎就需要横向滚动加载。类似于上拉加载的操作。

参考博客：vue横向分页

代码实现

html

<div class="project-list" @scroll="listScroll" id="tablist">
        <div 
            :class="['project-item']"
            v-for="(item,index) in getprojectInfo.output.rows"
            :key="index">
            <div class="project-address">
                <i class="el-icon-time"></i>
                {{ item.timePeriod }}
            </div>
        </div>
        <div class="loading-box" v-if="loading">
            {{findLabel('loading')||'--'}}....
        </div>
    </div>

 listScroll() {
            const scrollLeft = document.getElementById("tablist").scrollLeft;
            const clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
            const tablist = document.getElementById("tablist").scrollWidth;
            if ((tablist - clientWidth === scrollLeft||tablist - clientWidth === Math.ceil(scrollLeft)||tablist - clientWidth === Math.floor(scrollLeft)) && this.flag) {
                // 列表宽度-屏幕宽度 = 卷曲宽度  且  开关是打开的状态
                this.pageFn(); //请求数据
            }
        },
        pageFn() {
            console.log("去分页请求**********");
            this.flag = false; // 开关 关闭
            this.loading = true; // loading 打开
            const that = this;
            that.reqFn(); // 接口请求数据
        },
        reqFn() {
            this.getprojectInfo.input.pageRequest.page++
            this.getProjectList()
        },