如何用Vue + Mint UI实现上拉加载更多

你的名字 2023-10-06 15:47 16阅读 0赞

**引言:**

> **上拉加载更多在移动端不论是在 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)`

### **二、上拉加载更多展示** ###

![74c69a59d411586ded58cae0306a92fe.png][]

### **三、逻辑解析** ###

#### 1.上拉加载实际上是分页的一种体现，刚开始处于加载状态 ####

#### 2.如果数据加载成功需要判断数据是不是最后一页（可能只有一页数据） ####

(1)上拉加载是根据 page 的不断自增长，在调接口的时候获取新的数据的，如果加载出来的数据小于每页显示的数据，那么说明加载结束。需要通过 vue 数据双向绑定隐藏加载中字样  
(2)如果加载完数据，还需要显示没有更多数据的提示  
(3)使用 mint-ui 之

其中：  
`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**

> **并在 main.js 中 Vue.prototype.$http = axios 挂载一下，本片作者使用了环境变量进行跨域代理配置，你也可以根据自己的调用接口进行相应处理.**

[74c69a59d411586ded58cae0306a92fe.png]: https://img-blog.csdnimg.cn/img_convert/74c69a59d411586ded58cae0306a92fe.png