element無限スクロールの使い方
8205 ワード
InfiniteScroll無限スクロールの使い方
最近もプロジェクトでこのような問題が発生しましたね.データが多すぎてページを巡るのはとても大変ですから、この無限スクロールを使ってください.そうすれば、ページカートンがユーザーの他の操作を妨げないように、私は直接コードをつけましょう.
1.スクロールが必要な箇所にロード方法loadを付ける
2.声明は何から始まるか
3.方法
4.テーブルへのデータの取得
全体的に私の考え方はまず10本のデータをロードして、それからスクロールバーのスクロールに従って毎回表の中にpushを1本入れます.そうすれば、カートンがユーザーの使用に影響を与えません.もっと良い方法があれば、共有してもいいです.私も勉強してもいいです.
最近もプロジェクトでこのような問題が発生しましたね.データが多すぎてページを巡るのはとても大変ですから、この無限スクロールを使ってください.そうすれば、ページカートンがユーザーの他の操作を妨げないように、私は直接コードをつけましょう.
1.スクロールが必要な箇所にロード方法loadを付ける
<div
class="infinite-list"
v-infinite-scroll="load"
style="overflow: auto; max-height: 600px;width:90%; border: 1px solid #ddd;padding:0 16px"
>
<div
v-for="(item, index) in formData.fhckList"
:key="index"
class="infinite-list-item"
>
<div style="fonnt-size: 20px; font-weight: 900">
{
{
item.ware_name }}
</div>
</div>
</div>
2.声明は何から始まるか
data(){
return{
count:9
}
}
3.方法
//
load() {
// console.log(" ", this.formData.fhckList);
// console.log(" count", this.count);
// console.log(this.tabledatas);
this.count += 1;
// console.log(this.tabledatas[this.count]);
if (this.formData.fhckList.length > 0 && this.tabledatas[this.count]) {
this.formData.fhckList.push(this.tabledatas[this.count]);
}
},
4.テーブルへのデータの取得
//1.
selectData() {
this.count = 9;
if (this.formData.selecttypes) {
let params = {
attribute_id: this.formData.selecttypes,
platform_id: this.formData.platform_id,
country_id: this.formData.platform_site,
};
console.time();
warewareList(params).then((res) => {
res.data.data.map((row) => {
row.rule_level = "0";
row.trans_type = "0";
row.is_guahao = "0";
row.transTypes = [];
});
setTimeout(() => {
// this.formData.fhckList = res.data.data;
this.tabledatas = res.data.data;
this.formData.fhckList = res.data.data.slice(0, 10);
}, 1000);
// console.log("111111111111x", this.formData.fhckList);
});
console.timeEnd();
} else {
this.formData.fhckList = [];
}
},
全体的に私の考え方はまず10本のデータをロードして、それからスクロールバーのスクロールに従って毎回表の中にpushを1本入れます.そうすれば、カートンがユーザーの使用に影響を与えません.もっと良い方法があれば、共有してもいいです.私も勉強してもいいです.