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

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

tigon4年前 (2021-04-26)vue.js3485
<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生命周期

生命周期钩子的一些使用方法:beforecreate : 可以在这加个loading事件,在加载实例时触发created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用mounted : 挂载元素,获取到DOM节点updated : 如果对数据统一处理,在这里...

vue class style写法

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

vue-router 路由几种模式,分别什么用法

vue-router 默认 hash 模式 .  http://music.163.com/#/friend还有一种是history模式。  http://music.163.com/friendhash模式背后的原理是onhashchange事件,...

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...