vue-scroller

效果：下拉刷新，上拉分页加载更多数据

首先在命令行进行npm||cnpm下载

cnpm install vue-scroller -D

-D:就是 --save -dev

然后在你想要用scrolle的那个页面里将咱们刚才下载的东西引入

  import Vue from 'vue'
  import VueScroller from 'vue-scroller'
  Vue.use(VueScroller)

  //网络请求
import Axios from 'axios'

代码ScrollerOne.vue：

<template>
  <div class="container">
    <scroller :on-refresh="refresh" :on-infinite="infinite" ref="myscroller">
      <ul>
        <li v-for="(item,i) in arr" :key="i">
          <div v-if="true" class="itemStyle">111</div>
        </li>
      </ul>

    </scroller>

  </div>
</template>

<script>
  import Axios from 'axios'

  export default {
    name: "ScrollerOne",
    data() {
      return {
        noDate: false,//这是一个判断是否加载的开关
        arr: [],
        showPage: 1,
        pageSize: 4,
      }
    },
    mounted() {
      this.getData();
    },
    methods: {
      getData() {
        let that = this;
        // Axios.get('http://gank.io/api/data/%E7%A6%8F%E5%88%A9/5/1').then((response) => {
        Axios.get('http://gank.io/api/data/%E7%A6%8F%E5%88%A9/' + that.pageSize + '/' + that.showPage).then((response) => {
          console.log(response.data)
          let showPage = that.showPage
          //测试设置第3页是最后一页，展示效果
          if (showPage === 2) {
            that.noDate = true
          } else {
            that.noDate = false
          }

          if (showPage == 1) {
            that.arr = response.data.results;
            if (that.arr.length==0){
              // 列表数据为空的时候
              that.$refs.myscroller.finishInfinite(true);//这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈

            }
          } else {
            that.arr = that.arr.concat(response.data.results)
          }
          console.log(that.arr)
        }).catch((error) => {
          console.log(error)
          //没网的时候，或者接口调用异常的时候
          that.$refs.myscroller.finishInfinite(true);//这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
        })
      },
      // 下拉刷新
      refresh() {
        let that = this
        that.showPage = 1//重置页数刷新每次页数都是第一页
        that.noDate = false//重置数据判断
        setTimeout(function () {
          that.getData();
          that.$refs.myscroller.finishPullToRefresh();//刷新完毕关闭刷新的转圈圈
        }.bind(this), 1700)
      },
      // 上拉加载
      infinite(done) {
        let that = this;
        if (!that.noDate) {
          setTimeout(() => {
            that.showPage++;//下拉一次页数+1
            that.getData();
            done()//进行下一次加载操作
          }, 1500)
        } else {
          that.$refs.myscroller.finishInfinite(true);//这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
        }
      },
    },

  }
</script>

<style scoped>

  .container {
    display: flex;
    width: 375px;
    height: 100%;
    background: red;
    flex-direction: column;
  }

  .itemStyle {
    display: flex;
    width: 375px;
    height: 200px;
    background: coral;
    border: 1px blue solid;
    margin-bottom: 5px;
  }
</style>

注意App.vue重置样式：

<script>
  export default {
    name: 'App',
  }
</script>
<style>
  body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, textarea, button, p, blockquote, th, td{margin: 0;padding: 0;}
  body {padding:0;margin:0;text-align:center;color:#333;font-size:14px;font-family:"宋体", arial;}
  li{list-style-type:none;}
  a{text-decoration: none;}
  img,input{border:none;vertical-align:middle;}
</style>