如何用Vue + Mint UI实现上拉加载更多_mintui公众号上拉,每次都从第一页开始

  infinite-scroll-distance="40"
>

```

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

最后

推荐一些系统学习的途径和方法。

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

HTML 和 CSS：