1. main.js 中全局引入min-ui
//全局导入mint-ui组件
import MinUi from 'mint-ui'
Vue.use(MinUi);
或者按需导入
import { InfiniteScroll } from 'mint-ui';
Vue.use(InfiniteScroll);
2. html部分
<template>
<!--商品列表-->
<div class="goods-continal" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="0">
<div class="goods-item" v-for="item in goodsList" :key="item.id">
<img :src="item.pic" :alt="item.name">
<h3>{{ item.name }}</h3>
<div class="about">
<h4><span>¥{{ item.minPrice }}</span><i>¥{{ item.originalPrice }}</i></h4>
<p><span>热卖中</span><span>剩{{ item.stores }}件</span></p>
</div>
</div>
<!-- 加载状态 -->
<div class="status-loading">
<p v-if="isMore"><mt-spinner type="fading-circle" color="#26a2ff" :size="20"></mt-spinner>加载中</p>
<p v-if="!isMore">没有更多了。。。</p>
</div>
</div>
</template>
3. JavaScript 部分
export default {
data() {
return {
page: 0, // 默认获取第一页
pageSize: 8, // 默认展示8个商品
goodsList: [], // 商品列表
loading: false, // 滚动触发
isMore: true // 获取状态
}
},
methods: {
getGoods() {
this.$http.post('/shop/goods/list',querystring.stringify({
page: this.page,
pageSize: this.pageSize
})).then( (res) => {
if(res.data.code === 0 ) {
this.loading = false
this.goodsList = this.goodsList.concat(res.data.data)
}else{
this.loading = true
this.isMore = false
}
} )
},
loadMore() {
this.loading = true;
this.page++
this.getGoods()
}
}
}
注意:loadMore() 这个函数在页面首次加载就会执行,所以getGoods()方法不需要在created() 时调用
4. css 部分
.goods-continal{
width: 95%;
margin: 0 auto;
padding: 5px 0;
height: calc(100vh - 90px); // 规定滚动高度(必要)
overflow-y: auto; // 高度内内容滚动(必要)
@extend %flex;
.goods-item{}
}