请观赏
1. 下载 cnpm install mockjs --save
2.mock.js文件内模拟
import Mock from "mockjs";
Mock.setup({
timeout:"1000-3000"
})
let img_list=Mock.mock('/api/imglist','get',{
"list|10":[
{
"img":"@image('400x200','@color')",
"title":"@title(2)"
}
]
})
export default{img_list}
3. 通过axios请求数据
<template>
<div id="scroll">
<ul
v-infinite-scroll="loadMore"
infinite-scroll-disabled="loading"
infinite-scroll-distance="10" class="scroll-box">
<li v-for="(item,index) in img_list" :key="index">
<img v-lazy.scroll="item.img" alt="">
{{item.title}}
</li>
<div class="loading-more">
<mt-spinner type="fading-circle" color="#26a2ff" :size="40"></mt-spinner>
</div>
</ul>
</div>
</template>
<script>
import {img_list} from "../../src/mock"
import axios from "axios"
export default {
data(){
return{
loading:false,
img_list:[]
}
},
methods:{
loadMore() {
this.loading = true;
this.requestImg();
this.loading = false;
},
requestImg(){
this.$axios.get("/api/imglist").then(res=>{
this.img_list=[...this.img_list,...res.data.list.slice(0,5)] //首次显示10张图片,每次上拉加载5条数据
console.log(this.img_list)
})
}
},
created(){
this.requestImg();
}
}
</script>
<style scoped>
.scroll-box{
max-height: 100vh;
overflow: scroll;
}
.scroll-box li{
width: 100vw;
height:200px;
border: 1px solid;
}
.tip{
height: 60px;
line-height: 60px;
}
.scroll-box li img{
width: 100%;
height: 160px;
}
.loading-more{
width: 100%;
height: 30px;
display: flex;
justify-content: center;
}
.scroll-box li img[lazy=loading] {
width: 100%;
height: 160px;
margin: auto;
background: black;
}
</style>
