vuejsでスライディングローディングを実装する方法

スライディングローディングを実装するVuejsメソッド: 1. Vue.jsで作成したフック関数でデータのローディングを初期化する; 2. スクロールイベントリスナーを宣言する; 3. スライドが画面の一番下に到達したら、バックグラウンドに移動して新しいデータを要求します データ; 4. pageNum フィールドを宣言します; 5. 新しいデータを配列に保存します。

この記事の動作環境: Windows 7 システム、Vue バージョン 2.9.6、DELL G3 コンピューター。

vuejs でスラ​​イディングローディングを実装するにはどうすればよいですか?

vue.js はプルアップ読み込みを実装します

私のものは純粋に vue で開発されているため、いくつかの最適化と変更を加えました。次の効果

原則: Vue.jsで作成したフック関数で読み込みデータを初期化し、実装されたフック関数内でスクロールイベントリスナーを宣言し、画面の高さを監視し、スライドが画面の一番下に達したら、バックグラウンドに移動して新しいデータをリクエストします。同時に、データ内で pageNum フィールドを宣言して、現在読み込まれているページ数を記録します。 , pageSizeは1ページあたりのページ数を表示し、pageNumは現在のページ番号を表示し、毎回バックグラウンドでIncrease pageSizeを一定数ずつリクエストし、ロード後にdataにデータを格納している配列に新しいデータをリストします。

コード:

   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 を監視するには、this.$nextTick(() => {}) を追加する必要があります。コールバック。次の DOM 更新サイクルの後に実行されます。
2. vue で addEventListener('scroll', this.handleScroll, true) を使用します。メソッドの 3 桁目は true である必要があり、そうでない場合は有効になりません。
3. vue で要素フォーカスを取得するには、タグに ref='定義名' を追加し、メソッド

this.$refs. で名前を定義することで目的の機能を実現します。
4. 全画面スクロールバーの位置判定を使うのは間違いですので、私のメッセージリストは ul です メッセージリストのスクロールバー ul は要素全体の高さで判定できますスクロールバーの一番下まで到達するかどうかをMath.round()で切り上げますが、数十分の誤差はあるので大丈夫です。 。

最後に: 何か問題が起こったら、忘れずに私のところに来てください。 ！

推奨学習:「vue チュートリアル」

以上がvuejsでスライディングローディングを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。