infinite-scroll-distance="40"
>
```
其中:
getmovielist
是一个方法,用于调用接口处理数据,默认会自动调用一次初始化展示;
loading
是个开关,用于在加载数据过程中防止用户不断触发上来触底再次加载;
40
表示距离底部小于 40 像素的位置再次触发数据加载。
3.如果在加载的过程中,用户继续上拉至底部触碰加载新的一页数据(上拉加载实际上是分页的一种体现)
4.脚手架 html 代码如下
<template>
<div class="movie_body">
<ul
v-infinite-scroll="getmovielist"
infinite-scroll-disabled="loading"
infinite-scroll-distance="40"
>
<li v-for="item in movielist" :key="item._id">
<div class="pic_show"><img :src="item.imgurl"></div>
<div class="info_list">
<h2>{{item.title}}</h2>
<p>观众评 <span class="grade">{{item.ratings}}</span></p>
<p>主演: {{item.stars}}</p>
<p>{{item.description}}</p>
</div>
<div class="btn_mall">
购票
</div>
</li>
</ul>
<div class="commondiv loading" v-show="showloading">loading....</div>
<div class="commondiv" v-show="showmore">没有更多数据了...</div>
</div>
</template>
### 5 js代码如下
export default {
data() {
return {
movielist: [],
base_url:'http://localhost:8888/', //定义一个根目录,因为要访问图片需要根目录
loading: false,
page: 1, //page默认是1
pagesize: 5, //每次分页的条数
showloading: false, //控制加载loading
showmore: false, // 控制有没有更多数据
};
},
computed: {},
watch: {},
methods: {
getmovielist(){ // 默认执行一次
this.loading = true // 开关,数据没有出来之前不能连续请求同一参数的接口
this.showloading = true
var start = (this.page-1) * this.pagesize // strat表示跳过几条
var end = this.pagesize //查几条数据
this.$http.get(`/movies?start=${start}&end=${end}`).then(res => {
// console.log(res)
this.showloading = false
// 把所有的图片
var list = res.list //赋值一个变量
list.forEach((item)=>{
item.imgurl = this.base_url+item.imgurl
//同意处理图片前缀
})
// 如果赋值操作的话,那么每次上拉后请求过来的新数据会把前面的全部覆盖掉
this.movielist = this.movielist.concat(list)
//每次的数据都要添加进来而不是把之前的数据覆盖掉
if(list.length < this.pagesize){
//说明数据已经加载完毕
this.loading = true
//loading为false的话可以调用,为true的时候上拉的时候就停止请求了
this.showmore = true
} else { // 说明还有数据
this.page = this.page+1 //这个时候page需要加1
console.log(this.page)
this.loading = false
// 如果数据还有这个时候把loading放开
}
})
}
}
}
ps: axios 封装需要引入 axios
最后
推荐一些系统学习的途径和方法。
每个Web开发人员必备,很权威很齐全的Web开发文档。作为学习辞典使用,可以查询到每个概念、方法、属性的详细解释,注意使用英文关键字搜索。里面的一些 HTML,CSS,HTTP 技术教程也相当不错。
HTML 和 CSS: