vue的爬坑之路（九）之----vue-scroller下拉刷新上拉加载插件

本人找了很多vue的第三方插件，都找不到我想要的效果，后来发现了vue-scroller，发现很相似，于是开启了研究之路

先看效果

要是想看更具体的操作效果可以去官网看demo

https://www.npmjs.com/package/vue-scroller

下面来说一下写法

先下载

npm i vue-scroller -S

在你的需要加载的页面引入，也可以在公共js文件引入

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

这个插件主要是标签<scroller>,谁需要进行上拉加载下拉刷新就给谁加。

<scroller 
  :on-refresh="refresh"
  :on-infinite="infinite">
  <!-- content goes here -->
</scroller>

里面最主要的配置参数就是

on-refresh：下拉刷新

on-infinite：上拉加载

然后就可以在js里面写方法了，我沾以下虚拟数据写的demo供大家参考，可以直接粘贴复制运行观看

<template>
  <div>
    <scroller style="top: 44px;"
      :on-refresh="refresh"
      :on-infinite="infinite"
      refresh-layer-color="#4b8bf4"
      loading-layer-color="#ec4949"
    >
      <!-- custom refresh spinner, use default `spinner` & viewBox 0,0,64,64 class -->
      <svg class="spinner" style="stroke: #4b8bf4;" slot="refresh-spinner" viewBox="0 0 64 64">
        <g stroke-width="7" stroke-linecap="round"><line x1="10" x2="10" y1="27.3836" y2="36.4931"><animate attributeName="y1" dur="750ms" values="16;18;28;18;16;16" repeatCount="indefinite"></animate><animate attributeName="y2" dur="750ms" values="48;46;36;44;48;48" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" dur="750ms" values="1;.4;.5;.8;1;1" repeatCount="indefinite"></animate></line><line x1="24" x2="24" y1="18.6164" y2="45.3836"><animate attributeName="y1" dur="750ms" values="16;16;18;28;18;16" repeatCount="indefinite"></animate><animate attributeName="y2" dur="750ms" values="48;48;46;36;44;48" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" dur="750ms" values="1;1;.4;.5;.8;1" repeatCount="indefinite"></animate></line><line x1="38" x2="38" y1="16.1233" y2="47.8767"><animate attributeName="y1" dur="750ms" values="18;16;16;18;28;18" repeatCount="indefinite"></animate><animate attributeName="y2" dur="750ms" values="44;48;48;46;36;44" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" dur="750ms" values=".8;1;1;.4;.5;.8" repeatCount="indefinite"></animate></line><line x1="52" x2="52" y1="16" y2="48"><animate attributeName="y1" dur="750ms" values="28;18;16;16;18;28" repeatCount="indefinite"></animate><animate attributeName="y2" dur="750ms" values="36;44;48;48;46;36" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" dur="750ms" values=".5;.8;1;1;.4;.5" repeatCount="indefinite"></animate></line></g></svg>

      <div v-for="(item, index) in items"
          class="row">
        {{ item }}
      </div>


      <svg class="spinner" style="stroke: #4b8bf4;" slot="infinite-spinner" viewBox="0 0 64 64">
        <g stroke-width="7" stroke-linecap="round"><line x1="10" x2="10" y1="27.3836" y2="36.4931"><animate attributeName="y1" dur="750ms" values="16;18;28;18;16;16" repeatCount="indefinite"></animate><animate attributeName="y2" dur="750ms" values="48;46;36;44;48;48" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" dur="750ms" values="1;.4;.5;.8;1;1" repeatCount="indefinite"></animate></line><line x1="24" x2="24" y1="18.6164" y2="45.3836"><animate attributeName="y1" dur="750ms" values="16;16;18;28;18;16" repeatCount="indefinite"></animate><animate attributeName="y2" dur="750ms" values="48;48;46;36;44;48" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" dur="750ms" values="1;1;.4;.5;.8;1" repeatCount="indefinite"></animate></line><line x1="38" x2="38" y1="16.1233" y2="47.8767"><animate attributeName="y1" dur="750ms" values="18;16;16;18;28;18" repeatCount="indefinite"></animate><animate attributeName="y2" dur="750ms" values="44;48;48;46;36;44" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" dur="750ms" values=".8;1;1;.4;.5;.8" repeatCount="indefinite"></animate></line><line x1="52" x2="52" y1="16" y2="48"><animate attributeName="y1" dur="750ms" values="28;18;16;16;18;28" repeatCount="indefinite"></animate><animate attributeName="y2" dur="750ms" values="36;44;48;48;46;36" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" dur="750ms" values=".5;.8;1;1;.4;.5" repeatCount="indefinite"></animate></line></g></svg>
    </scroller>
  </div>
</template>

<script>
  export default {
    components: {
      
    },

    data () {
      return {
        items: []
      }
    },

    mounted() {
      for (let i = 1; i <= 20; i++) {
        this.items.push(i + ' - keep walking, be 2 with you.')
      }
      this.top = 1
      this.bottom = 20
    },

    methods: {
      refresh(done) {
        setTimeout(() => {
          let start = this.top - 1
          for (let i = start; i > start - 10; i--) {
            this.items.splice(0, 0, i + ' - keep walking, be 2 with you.')
          }
          this.top = this.top - 10;
          done()
        }, 1500)
      },

      infinite(done) {
        if (this.bottom >= 30) {
          setTimeout(() => {
            done(true)
          }, 1500)
          return;
        }

        setTimeout(() => {
          let start = this.bottom + 1
          for (let i = start; i < start + 10; i++) {
            this.items.push(i + ' - keep walking, be 2 with you.')
          }
          this.bottom = this.bottom + 10;
          setTimeout(() => {
            done()
          })
        }, 1500)
      }
    }
  }
</script>

下面是我链接后台给的接口获得的真实数据的demo

<template>
  <div>
    <scroller style="top: 44px;"
      :on-infinite="infinite"
      refresh-layer-color="#333"
      loading-layer-color="#fdd000"
    >
      <!-- custom refresh spinner, use default `spinner` & viewBox 0,0,64,64 class -->
      <svg class="spinner" style="stroke: #fdd000;" slot="refresh-spinner" viewBox="0 0 64 64">
        <g stroke-width="7" stroke-linecap="round"><line x1="10" x2="10" y1="27.3836" y2="36.4931"><animate attributeName="y1" dur="750ms" values="16;18;28;18;16;16" repeatCount="indefinite"></animate><animate attributeName="y2" dur="750ms" values="48;46;36;44;48;48" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" dur="750ms" values="1;.4;.5;.8;1;1" repeatCount="indefinite"></animate></line><line x1="24" x2="24" y1="18.6164" y2="45.3836"><animate attributeName="y1" dur="750ms" values="16;16;18;28;18;16" repeatCount="indefinite"></animate><animate attributeName="y2" dur="750ms" values="48;48;46;36;44;48" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" dur="750ms" values="1;1;.4;.5;.8;1" repeatCount="indefinite"></animate></line><line x1="38" x2="38" y1="16.1233" y2="47.8767"><animate attributeName="y1" dur="750ms" values="18;16;16;18;28;18" repeatCount="indefinite"></animate><animate attributeName="y2" dur="750ms" values="44;48;48;46;36;44" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" dur="750ms" values=".8;1;1;.4;.5;.8" repeatCount="indefinite"></animate></line><line x1="52" x2="52" y1="16" y2="48"><animate attributeName="y1" dur="750ms" values="28;18;16;16;18;28" repeatCount="indefinite"></animate><animate attributeName="y2" dur="750ms" values="36;44;48;48;46;36" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" dur="750ms" values=".5;.8;1;1;.4;.5" repeatCount="indefinite"></animate></line></g></svg>

      <div class="search_cont clearfix">
        <ul  class="clearfix">
          <li v-for='(sear,ind) in searchvaldata'>
            <a href="javascript:;">
              <div class="twi_list_box">
                <div class="twi_list_img">
                  <img :src="sear.product_image" alt="">
                </div>
              </div>
              <h4>{{sear.product_name}}</h4>
              <div class="money clearfix">
                <span>&yen;{{sear.product_mix_price}}</span>
              </div>
            </a>
          </li>
        </ul>
        
      </div>

      <svg class="spinner" style="stroke: #fdd000;" slot="infinite-spinner" viewBox="0 0 64 64">
        <g stroke-width="7" stroke-linecap="round"><line x1="10" x2="10" y1="27.3836" y2="36.4931"><animate attributeName="y1" dur="750ms" values="16;18;28;18;16;16" repeatCount="indefinite"></animate><animate attributeName="y2" dur="750ms" values="48;46;36;44;48;48" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" dur="750ms" values="1;.4;.5;.8;1;1" repeatCount="indefinite"></animate></line><line x1="24" x2="24" y1="18.6164" y2="45.3836"><animate attributeName="y1" dur="750ms" values="16;16;18;28;18;16" repeatCount="indefinite"></animate><animate attributeName="y2" dur="750ms" values="48;48;46;36;44;48" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" dur="750ms" values="1;1;.4;.5;.8;1" repeatCount="indefinite"></animate></line><line x1="38" x2="38" y1="16.1233" y2="47.8767"><animate attributeName="y1" dur="750ms" values="18;16;16;18;28;18" repeatCount="indefinite"></animate><animate attributeName="y2" dur="750ms" values="44;48;48;46;36;44" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" dur="750ms" values=".8;1;1;.4;.5;.8" repeatCount="indefinite"></animate></line><line x1="52" x2="52" y1="16" y2="48"><animate attributeName="y1" dur="750ms" values="28;18;16;16;18;28" repeatCount="indefinite"></animate><animate attributeName="y2" dur="750ms" values="36;44;48;48;46;36" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" dur="750ms" values=".5;.8;1;1;.4;.5" repeatCount="indefinite"></animate></line></g></svg>
    </scroller>
  </div>
</template>

<script>
  

  export default {
    data () {
      return {
        searchvaldata:[],
        offset:1
      }
    },
    mounted() {
      this.a()
    },
    methods:{
      a(){
        this.$http.get('v1/search?search=鞋子',{ params: { page: 1, pagesize: 20 } }).then(res=>{
          if(res.data.data.data.length!=0){
              // this.searchvaldata=[]
              this.searchvaldata=this.searchvaldata.concat(res.data.data.data)
          }else{

          }
        })
      },
      infinite(done) {
        this.offset++ 
        this.$http.get('v1/search?search=鞋子',{ params: { page: this.offset, pagesize: 20 } }).then(res=>{
          if(res.data.data.data.length!=0){
            this.searchvaldata=this.searchvaldata.concat(res.data.data.data)
            done()
          }else{
            done(true)
          }
        })
      }
    }
  }

</script>
<style>
  .search_title{
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    padding:14px 24px;
    border-bottom: 1px solid #ebebeb;
    z-index: 100;
    position: fixed;
    top: 0;
  }
  .searchtext{
    width: 89%;
    float: left;
    height: 60px;
    border: none;
    border-radius: 10px;
    font-size: 24px;
    text-indent: 16px;
    color: #000;
    background-color: #f0f0f0;
  }
  .searchtext::-webkit-input-placeholder{
    color: #8c8c8c;
  }
  .searchbtn{
    width: 10%;
    float: right;
    /*margin-left: 16px;*/
    height: 60px;
    line-height: 60px;
    background-color: transparent;
    outline: none;
    border: none;
    color: #323232;
    border-radius: 10px;
    font-size: 24px;
  }
  /* 产品列表 */
  .search_cont{
    padding:24px;
  }
  .search_cont li{
    width: 335px;
    float: left;
    text-align: center;
    margin: 10px 30px 40px 0;
  }
  .search_cont li:nth-child(2n){
    margin-right: 0;
  }
  .twi_list_box{
    width: 335px;
    height: 446px;
    position: relative;
    background-color: #fff;
    overflow: hidden;
  }
  
  .twi_list_img{
    width: 535px;
      height:535px;
      transform: rotate(45deg);
      position: absolute;
        left: -100px;
      top: -44.5px;
      overflow: hidden;
  }
  .twi_list_img img{
    width: 335px;
    height: 446px;
    transform: rotate(-45deg);
    position: absolute;
    left: 100px;
      top: 44.5px;
  }
  
  .search_cont h4{
    color: #000;
    font-weight: inherit;
    margin: 20px 0;
    text-align: left;
    font-size: 24px;
    color: #646464;
  }
  .money span{
    float: left;
    font-size: 30px;
    color: #323232;
  }
  .money i{
    float: right;
  }
</style>

觉得我写的不好的小伙伴们勿喷，因为这是写给我自己看的一边日后碰到类似的情况供自己参考，但是如果能帮到正在迷途中的同志们，我也是很欣慰的，如果我写的帮到了你，希望你不要忘记留下你的足迹，给我激励再接再厉，哈哈哈！