vue移动端上拉加载
<!-- 一名小白,有大佬的话请留情 -->
<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>
赞 (0)