小白入门---Vue无限滚动（vue-infinite-scroll）

Vue无限滚动（vue-infinite-scroll）

1.安装插件

1.npm i vue-infinite-scroll –save:安装vue-infinite-scroll插件并且会将包的名称及版本号放在dependencies里面

2.D就是–save-dev 这样安装的包的名称及版本号就会存在package.json的devDependencies这个里面，而–save会将包的名称及版本号放在dependencies里面《上线需要依赖的我们都需要写在dependencies里面》

2.使用插件

import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

3.在组件中使用插件

使用v-infinite-scroll=”loadMore”当页面触发到底部的时候 执行这个函数，并使用infinite-scroll-disabled=”busy”判断当滚动满足条件后是否执行loadMore函数，使用infinite-scroll-distance=”x”距离底部多远然后执行loadMore。

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
...
</div>

<script>
import HeadNav from '@/components/Head'//引入组件并重命名
import NavBread from '@/components/NavBread'//引入组件并重命名
import Footer from '@/components/Foot'//引入组件并重命名
import axios from 'axios'//引入axios
export default{
data(){
return{
list:[],//显示商品的列表
sortFlog:true,//默认是按照正序价格排列
priceChecked:'all',//默认选中的价格范围
busy:true,//默认允许滚动执行loadMore函数
page:1,//默认分页为第一页
pageSize:8,//默认每页显示8条数据
flag:false,//默认没有分页
priceFilter:[//价格过滤器
{
startPrice:'0',
endPrice:'100'
},
{
startPrice:'1000',
endPrice:'500'
},
{
startPrice:'5000',
endPrice:'1000'
},
{
startPrice:'1000',
endPrice:'5000'
}
]
}
},
components:{//组件
HeadNav,
NavBread,
Footer,
},
created(){
this.getGoods()
},
methods:{
getGoodsList() {
axios.get("http://easy-mock.com/mock/59664d4d58618039284c7710/example/goods/list").then(res=>{
res=res.data.data;
//                this.list=res;
})
},
getGoods(flag){
let sort=this.sortFlog?1:-1;
let param={
sort:sort,
priceLevel:this.priceChecked,
page:this.page,
pageSize:this.pageSize
}
axios.get('/goods/list',{params:param}).then(res=>{
//          this.list= res.data.result;
if(flag){//判断是否通过分页
this.list=this.list.concat(res.data.result);//分页数据追
9c53
加到这个list里面
if(res.data.result.length==0){//判断数是否加载完成，就让数据截停
this.busy=true;
}else{
this.busy=false;
}
}else{
this.list=res.data.result;
this.busy=false;
}
console.log(res.data.result);
})
},
sortGoods(){
this.sortFlog=!this.sortFlog;
this.getGoods();
},
setPriceFilter(index){
this.priceChecked=index;
this.page=1;
this.getGoods();
},
loadMore:function () {
this.busy=true;
setTimeout(()=>{
this.page++;
this.getGoods(true);
},500)
}
}
}
</script>