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>