<!-- 一名小白，有大佬的話請留情 -->
<template>
<!-- 自己實作上拉加載就需要一個滾動的容器 --> <div class="scroll-box" @scroll="scrollBox($event)"> <!-- 自己實作上拉加載 --> <ul ref="scroll-box"> <li v-for="item in list" :key="item">{{item}}</li> </ul> </div> </template>
<script> export default { data() { return { list: [], num: 1, }; }, created() { this.rember(); }, methods: { rember() { // console.log("123"); for (var i = 0; i < 100; i++) { if (this.list.length <= 500) { this.list.push(this.list.length + 1); } } }, scrollBox(e) { // console.log(e.target.scrollTop); console.log(this.num); // 找一個滾動到合適加載的位置(與資料多少有關)，并拿到值，做處理 // 如果滾動的位置為2100加載 // 并且到每次滾動的位置一定與2100有關 if (e.target.scrollTop >= 2100 * this.num) { this.rember(); this.num += 1.2; } }, }, }; </script> <style scoped lang = "less"> .scroll-box { height: 100%; overflow-y: auto; } </style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/875.html
標籤：HTML5
上一篇：返回列表
下一篇：優美網站首頁，頂部多層導航