给同事用ElementUI写了一个自动加载的滚动列表demo 部分代码：
<div class="mobile">
<div class="list-box">
<div class="infinite-list-wrapper" v-infinite-scroll="load">
<div class="wrapper">
<el-card class="wrapper-item" v-for="(v,i) in dataList" :key="i">
<el-descriptions :column="1" :colon="false">
<el-descriptions-item contentClassName="text">{{v.title}}</el-descriptions-item>
<el-descriptions-item contentClassName="text">{{v.name}}</el-descriptions-item>
<el-descriptions-item contentClassName="time">{{v.time}}</el-descriptions-item>
</el-descriptions>
</el-card>
</div>
<el-divider v-if="loading" content-position="center">加载中...</el-divider>
<el-divider v-if="!loading" content-position="center">没有更多了</el-divider>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
loading: true,
dataList: [
{
title: "考核表",
name: "测试",
time: "2021-05-08 10:18:27",
},
{
title: "考核表",
name: "测试",
time: "2021-05-08 10:18:27",
},
{
title: "考核表",
name: "测试",
time: "2021-05-08 10:18:27",
},
{
title: "考核表",
name: "测试",
time: "2021-05-08 10:18:27",
},
],
};
},
methods: {
load() {
setTimeout(() => {
if(this.dataList.length > 20){
this.loading = false;
}else{
this.loading = true;
this.dataList = [...this.dataList, ...this.dataList];
}
}, 1000);
},
},
};
</script>
对方和我反馈不会触发 load 事件，我自己在本机上测试都没有问题。
一开始以为是浏览器兼容问题，
后面发现浏览器上用不同的手机型号，有的会触发，有的不会触发。
最后发现把InfiniteScroll内的那一级dom元素去掉就可以了。
代码改为：
<el-card class="wrapper-item" v-for="(v,i) in dataList" :key="i">
<el-descriptions :column="1" :colon="false">
<el-descriptions-item contentClassName="text">{{v.title}}</el-descriptions-item>
<el-descriptions-item contentClassName="text">{{v.name}}</el-descriptions-item>
<el-descriptions-item contentClassName="time">{{v.time}}</el-descriptions-item>
</el-descriptions>
</el-card>
<el-divider v-if="loading" content-position="center">加载中...</el-divider>
<el-divider v-if="!loading" content-position="center">没有更多了</el-divider>
</div>
