スライディングローディングを実装する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 サイトの他の関連記事を参照してください。