引言:
上拉加载更多在移动端不论是在 app 里面还是在页面中都是必不可少的,以下是 mint-ui 中上拉加载更多的总结。
一、在项目中使用 mint-ui 需要先安装
查看官网
(1)安装:npm i mint-ui --save
(2)在 vue 中 main.js 引入
import MintUi from 'mint-ui
import 'mint-ui/lib/style.css
全局使用: Vue.use(MintUi)
二、上拉加载更多展示
三、逻辑解析
1.上拉加载实际上是分页的一种体现,刚开始处于加载状态
2.如果数据加载成功需要判断数据是不是最后一页(可能只有一页数据)
(1)上拉加载是根据 page 的不断自增长,在调接口的时候获取新的数据的,如果加载出来的数据小于每页显示的数据,那么说明加载结束。需要通过 vue 数据双向绑定隐藏加载中字样
(2)如果加载完数据,还需要显示没有更多数据的提示
(3)使用 mint-ui 之
<ulv-infinite-scroll="getmovielist"infinite-scroll-disabled="loading"infinite-scroll-distance="40"></ul>
其中:
getmovielist 是一个方法,用于调用接口处理数据,默认会自动调用一次初始化展示;
loading 是个开关,用于在加载数据过程中防止用户不断触发上来触底再次加载;
40 表示距离底部小于 40 像素的位置再次触发数据加载。
3.如果在加载的过程中,用户继续上拉至底部触碰加载新的一页数据(上拉加载实际上是分页的一种体现)
4.脚手架 html 代码如下
<template><div class="movie_body"><ulv-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默认是1pagesize: 5, //每次分页的条数showloading: false, //控制加载loadingshowmore: false, // 控制有没有更多数据};},computed: {},watch: {},methods: {getmovielist(){ // 默认执行一次this.loading = true // 开关,数据没有出来之前不能连续请求同一参数的接口this.showloading = truevar 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需要加1console.log(this.page)this.loading = false// 如果数据还有这个时候把loading放开}})}}
}
ps: axios 封装需要引入 axios
并在 main.js 中 Vue.prototype.$http = axios 挂载一下,本片作者使用了环境变量进行跨域代理配置,你也可以根据自己的调用接口进行相应处理.