vuejs에서 슬라이딩 로딩을 구현하는 방법

슬라이딩 로딩을 구현하는 Vuejs 방법: 1. Vue.js에서 생성된 후크 함수에서 데이터 로딩을 초기화합니다. 2. 스크롤 이벤트 리스너를 선언합니다. 3. 슬라이딩이 화면 하단에 도달하면 배경으로 이동합니다. 새 데이터를 요청합니다. 4. pageNum 필드를 선언합니다. 5. 배열에 새 데이터를 저장합니다.

이 기사의 운영 환경: Windows 7 시스템, Vue 버전 2.9.6, DELL G3 컴퓨터.

vuejs에서 슬라이딩 로딩을 구현하는 방법은 무엇입니까?

vue.js는 풀업 로딩을 구현합니다

내 것은 vue로만 개발되었으므로 먼저 몇 가지 최적화 및 수정을 가해 효과를 살펴보겠습니다

원리: Hooks in Vue.js 생성된 함수에서 데이터 로딩을 초기화합니다. 슬라이드가 화면 하단에 도달하면 백그라운드로 이동하여 요청합니다. 동시에 데이터에 pageNum 필드를 선언하여 현재 로드를 기록합니다. pageSize는 페이지당 페이지 수를 표시하고 pageNum은 페이지로 이동할 때마다 표시됩니다. 백그라운드에서 요청하면 페이지 크기를 특정 숫자만큼 늘린 후 새 데이터가 데이터에 데이터를 저장하는 배열에 나열됩니다.

코드:

   created(){
            loading = showLoading('加载中…')//这是我引用的vant可以不写
            this.custid = localStorage.getItem('cust_id')
            //初始化加载数据
            this.methodsGetMessage(this.custid,this.pageNum,this.pageSize)
        },
        mounted(){
            //监听如果页面发生滚动时
            this.$nextTick(() => {
                this.$refs.homeUl.addEventListener('scroll',this.handleScroll,true);
            })
        },
        methods:{
            //初始化加载数据
            methodsGetMessage(custid,pageNum,pageSize){
                loading = showLoading('加载中…')
                getMessage(custid,pageNum,pageSize).then((res)=>{
                    loading.clear()
                    if(res.code == 200){
                        this.pagNum += 1;
                        if(res.data.list == []){
                            this.list = []
                            showToast('暂无消息')
                        }else{
                            this.totalnum = Math.ceil(res.data.total/8)
                            var list=res.data.list
                            for(var i in list){
                                list[i].addtime = this.dateToString(list[i].addtime)
                            }
                            this.list.push(list)
                            this.listLength = list.length
                        }
                        loading.clear()
                        //隐藏
                    }else{
                        showToast('获取消息失败')
                        loading.clear()
                    }
                })
            },
            //页面滑到底部需要调用的方法
            handleScroll(){ //下面这部分兼容手机端和PC端
                var scrollTop = this.$refs.homeUl.scrollTop; //滚动条的位置
                var windowHeitht = this.$refs.homeUl.clientHeight; //在页面上返回内容的可视高度
                var scrollHeight = this.$refs.homeUl.scrollHeight; //返回整个元素的高度（包括带滚动条的隐蔽的地方）
                //是否滚动到底部的判断
                if(Math.round(scrollTop) + windowHeitht == scrollHeight){
                    console.log(this.pagNum+'=='+this.totalnum)
                    if(this.pagNum <= this.totalnum){
                        this.methodsGetMessage(this.custid,this.pageNum,this.pageSize)
                    }else{
                        this.notList = true
                        return;
                    }
                }
            },
  }

1. 마운트된 후크 함수에서 addEventListener를 모니터링하려면 다음 DOM 업데이트 주기까지 콜백을 지연시키는 this.$nextTick(() => {})를 추가해야 합니다.
2. vue에서 addEventListener('scroll', this.handleScroll, true)를 사용하세요. 메서드의 세 번째 숫자는 true를 추가해야 합니다. 그렇지 않으면 적용되지 않습니다.
3. vue에서 요소 포커스를 얻으려면 태그에 ref='definition name'을 추가한 다음

this.$refs 메소드에서 이름을 정의하세요.
4. 전체 화면 스크롤 막대 위치 판단을 사용하는 것은 잘못됩니다. 따라서 내 메시지 목록은 ul입니다. 스크롤 막대 위치의 맨 아래까지 도달했는지 확인합니다. Math.round()를 사용하여 반올림합니다. 10분의 1 정도의 오차가 있으므로 괜찮습니다. .

마지막으로, 무슨 일이 생기면 꼭 저한테 찾아오세요! !

추천 학습: "vue tutorial"

위 내용은 vuejs에서 슬라이딩 로딩을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!