当前位置:首页 > vue.js > 正文内容

vue 滚动条向下滑动加载更多

tigon1年前 (2021-04-26)vue.js1388
<div class="ld-container" id="computer-main" ref="cmdlist"></div>

scrollMoreData() {
    //const scrollTopHeight = document.documentElement.scrollTop || document.body.scrollTop|| window.pageYOffset  这句如果一直拿到值是0就用 (const scrollTopHeight = this.$refs.cmdlist.scrollTop)
                const scrollTopHeight = this.$refs.cmdlist.scrollTop
                const clientHeight = document.documentElement.clientHeight || window.screen.availHeight
                const offsetHeight = document.documentElement.offsetHeight || document.body.offsetHeight
                console.log(this.$refs.cmdlist.scrollTop)
                // 滚动条距文档顶部的距离
                let scrollTop = this.$refs.cmdlist.scrollTop
                // 滚动条滚动的距离
                let scrollStep = scrollTop - this.oldScrollTop;
                // 更新——滚动前,滚动条距文档顶部的距离
                this.oldScrollTop = scrollTop;
                if (scrollStep < 0) {
                    console.log("滚动条向上滚动了!")
                } else {
                    // console.log("滚动条向下滚动了!")
                    if ((scrollTopHeight + clientHeight)+50 >= offsetHeight) {
                        if(this.serviceListPage>=this.serviceTotal){
                            console.log(1111)
                            this.noMoreData=true
                            setTimeout(()=>{
                                this.noMoreData=false
                            },2000)
                            return false
                        }
                        else if(this.isScroll){
                            this.loadingMore = true
                            this.serviceListPage += 1
                            let params={
                                MachineNo: 'PC039F5H',
                                RouteCode:'ThinkBu',
                                page:this.serviceListPage,
                                pageSize:this.serviceListPageSize
                            }
                            let timer=null
                            // 这里请求因为后台只有2条数据没法测试翻页效果
                            this.RongIM.dataModel._Computer.getService(
                                params,
                                (res, data) => {
                                    console.log(data)
                                    if (res === 'success') {

                                        // this.serviceListPage=data.pageCount
                                        // this.serviceListPageSize=data.count
                                        if(this.serviceListPage>=data.pageCount){
                                            // this.serviceListPage=1
                                            this.loadingMore = false
                                            this.noMoreData=true
                                            timer=setTimeout(()=>{
                                                this.noMoreData=false
                                                this.isScroll = false
                                            },2000)
                                        }else{
                                            this.isScroll = true
                                        }
                                        if(data.goodsList.length>0){
                                            this.$store.commit('setServiceScrollData', data.goodsList);
                                            this.serviceList = [...this.serviceList, ...res.goodsList]
                                        }

                                    }
                                },
                            );
                            clearTimeout(timer)
                        }

                    }
                }


            }



            mounted() {
        this.$nextTick(()=>{

            this.scollPage = document.getElementById('computer-main');
            this.scollPage.addEventListener('scroll', debounce(this.scrollMoreData),true)
        })
    },
    destroyed () {
        this.$nextTick(()=>{    this.scollPage.removeEventListener('scroll',this.scrollMoreData,true) 
            this.$store.commit('setServiceData', '');
        })

    },

版权声明:本文由Web学习之路发布,如需转载请注明出处。

本文链接:https://webge.net/?id=119

“vue 滚动条向下滑动加载更多” 的相关文章

vue class style写法

class,第一种就是把判断的变量放在后面,前面就是判断之后要设置的class名称v-bind:class="{ active: isActive, 'text-danger': hasError }">data: {  isActive: tru...

vuex刷新状态消失的解决办法

vuex做数据管理非常好,但是唯一美中不足的地方,就是当页面刷新的时候状态保存不下来,但是工作业务中,常常会遇到,可能需要把状态保留下来的情况那在这种情况下可以使用方案:在 app.vue中的created函数中写如下代码:localstorage和sessionStorage都可以//在页面加载时...

vue3

vue3

安装vite?-Vite是vue作者开发的一款意图取代webpack的工具,其实原理是利用ES6的import会发送请求加载文件的特性,拦截这些请求,做一些预编译,省去webapck沉长的打包时间安装:npm install -D create-vite-app利用vite创建 vue3项目cre...

watch监听的几种写法

var vm = new Vue({ data: { a: 1, b: 2, c: 3, d: 4, e: { f: { g: 5 } } }, watch: { a...

vue3 新属性使用

vue3 新属性使用

setUp(){} //可以把所有数据和方法都放这里面一起导出,这个是在实现挂载之前就会执行的 ref基本的数据类型 reactive可以把数组,对象转成响应式 readonly处理之后的数据不能进行修改 toRefs可以把响应对象的某个解构出来的值变成响应式,如果原数据没有key,那就会...

vue updateModel

vue updateModel

v-model高级用法...