文档章节

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

o
 osc_1ee7cxmx
发布于 2018/08/06 17:35
字数 1739
阅读 0
收藏 0

精选30+云产品,助力企业轻松上云!>>>

本人找了很多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>

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

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

Eclipse_JavaEE_Tomcat_MySQL环境配置

安装java环境,配置系统变量(JAVA_HOME,绝对路径) 下载eclipse+Tomcat+mysql window——》preference——》server——》runtime——》tomcat环境 项目右键build path 配mysql jar ,libra...

愿有时光可回首
26分钟前
20
0
MySQL原理 - InnoDB引擎 - 行记录存储 - Redundant行格式

本文基于 MySQL 8 在上一篇:MySQL原理 - InnoDB引擎 - 行记录存储 - Compact格式 中,我们介绍了什么是 InnoDB 行记录存储以及 Compact 行格式,在这一篇中,我们继续介绍其他三种行格式。 ...

zhxhash
47分钟前
17
0
leetcode面试题 17.13(恢复空格)--Java语言实现

求: 哦,不!你不小心把一个长篇文章中的空格、标点都删掉了,并且大写也弄成了小写。像句子"I reset the computer. It still didn’t boot!"已经变成了"iresetthecomputeritstilldidntboo...

拓拔北海
56分钟前
19
0
B站跨年晚会究竟做对了什么?

燃财经(ID:rancaijing)原创 作者 | 赵磊 编辑 | 周昶帆 “补课”是《bilibili晚会 二零一九最美的夜》这个视频中,观众在前两分钟刷得最多的弹幕,寓意着观众是在元旦之后回来补看跨年晚会...

子乾建建_Jeff
01/07
45
0
关于Scrapy爬虫项目运行和调试的小技巧(上篇)

点击上方“Python爬虫与数据挖掘”,进行关注 回复“书籍”即可获赠Python从入门到进阶共10本电子书 今 日 鸡 汤 迟日江山丽,春风花草香。泥融飞燕子,沙暖睡鸳鸯。 扫除运行Scrapy爬虫程序...

yuhan336
04/02
26
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部