vue.js移动端app之上拉加载以及下拉刷新实战

上拉加载以及下拉刷新都是移动端很常见的功能，在搜索或者一些分类列表页面常常会用到。

跟横向滚动一样，我们还是采用better-scroll这个库来实现。由于better已经更新了新的版本，之前是0.几的版本，更新了一下发现，现在已经是1.2.6这个版本了，新版本多了些 比较好用的api，所以我也重写了之前的代码，用新的api来实现上拉加载以及下拉刷新。

首先把基本的样式写好，这里就略过了，然后引入better-scroll库

import bscroll from 'better-scroll'

其次，在mounted生命周期实例化scroll,可以获取完数据后再new，也可以先new后，获取完数据调用refresh。

实例时需要传入一个配置参数，由于参数比较多，具体的请参考文档，这里只讲2个重点的：

//是否开启下拉刷新，可传入true或者false,如果需要更多配置可以传入一个对象

pulldownrefresh：{
  threshold:80,
  stop:40
}

//是否开启上拉加载，同上，上拉无stop参数，这里需要注意是负数
pullupload：{
  threshold:-80,
}

/**
 * 
 * @param threshold 触发事件的阀值，即滑动多少距离触发
 * @param stop 下拉刷新后回滚距离顶部的距离（为了给loading留出一点空间）
 */

以上的数字个人感觉比较合适，但是这里有一个问题，由于我采用的是淘宝flexible.js来适配，这就导致：在安卓下80这个距离是合适的，但是到了iphone6s下，由于被缩放了3陪，所以现在80在iphone6s下就是27左右了。

所以，对于不同缩放程度的屏幕，还需要乘以对应的缩放比。

淘宝flexible.js里面其实已经有这个获取屏幕缩放比方法，这里直接从里面拿：

//在util.js里面加一个方法
export function getdeviceratio(){
  var isandroid = window.navigator.appversion.match(/android/gi);
  var isiphone = window.navigator.appversion.match(/iphone/gi);
  var devicepixelratio = window.devicepixelratio;
  var dpr;
  if (isiphone) {
    // ios下，对于2和3的屏，用2倍的方案，其余的用1倍方案
    if (devicepixelratio >= 3) {        
      dpr = 3;
    } else if (devicepixelratio >= 2){
      dpr = 2;
    } else {
      dpr = 1;
    }
  } else {
    // 其他设备下，仍旧使用1倍的方案
    dpr = 1;
  }
  return dpr
}

import{ device_ratio} from '../base/js/api.js'
/*获取当前缩放比*/
const device_ratio=getdeviceratio();


 /*下拉配置*/
const down_config={
 threshold:80*device_ratio,
 stop:40*device_ratio
}
/*上拉配置*/
const up_config={
 threshold:-80*device_ratio,
}

this.scroller = new bscroll(scrollwrap,{
 click:true,
 probetype:3,
 pulldownrefresh:down_config,
 pullupload:up_config
});

实例化后，接下来就是监听上拉和下拉事件了。betterscroll新增了一些事件，主要的有：

/*下拉事件*/
this.scroller.on('pullingdown',()=> {});

/*上拉事件*/
this.scroller.on('pullingup',()=>{});

触发上拉或者下拉事件后，需要我们调用 this.scroller.finishpulldown() 或者 this.scroller.finishpullup() 来通知better-scroll事件完成。

大致的流程是这样的：

this.scroller.on('pullingdown',()=> {
  
  <!-- 1. 发送请求获取数据 -->
  
  <!-- 2. 获取成功后，通知事件完成 -->
  
  <!-- 3. 修改data数据，在nexttick调用refresh -->
});

通常操作完成后都需要我们手动触发refresh方法来重新计算可滚动的距离，因此可以写一个watch监听数据的变化，这样我们只需要改变数据，不用每次操作数据后都调用refresh方法。

watch:{
 datalist(){
  this.$nexttick(()=>{
   this.scroller.refresh(); 
  }) 
 }
},

如果你使用的版本还是旧的，那可以在on( scroll )事件的时候进行判断来实现功能

this.scroller.on("scroll",(pos)=>{ 
  //获取整个滚动列表的高度
  var height=getstyle(scroller,"height");

  //获取滚动外层wrap的高度
  var pageheight=getstyle(scrollwrap,"height");

  //触发事件需要的阀值
  var distance=80*device_ratio;

  //参数pos为当前位置

  if(pos.y>distance){ 

    //console.log("下拉");
    //do something
   
  }else if(pos.y-pageheight<-height-distance){

    //console.log("上拉");
    //do something
  }

为了防止多次触发，需要加2个开关类的东西;

var onpullup=true;

var onpulldown=true;

每次触发事件时，將对应的开关设置为false, 等操作完成后，再重新设置为true,否则多次下拉或者上拉就会触发多次事件。通过设置开关可以保证每次只有一个事件在进行。

最后，来封装成一个组件

 <template>
  <div ref="wrapper" class="list-wrapper"> 
    <div class="scroll-content">    
      <slot></slot>     
    </div>   
  </div>
</template>

由于每个页面需要滚动的具体内容都是不一样的，所以用了一个插槽来分发。

组件需要的参数由父级传入，通过prop来接收并设置默认值

 export default {
  props: {
   datalist:{
    type: array,
    default: []
   },
   probetype: {
    type: number,
    default: 3
   },
   click: {
    type: boolean,
    default: true
   },  
   pulldownrefresh: {
    type: null,
    default: false
   },
   pullupload: {
    type: null,
    default: false
   },  
  }

组件挂载后，在事件触发时并不直接处理事件，而是向父级发送一个事件，父级通过在模板v-on接收事件并处理后续的逻辑

mounted() {
  this.scroll = new bscroll(this.$refs.wrapper, {
      probetype: this.probetype,
      click: this.click,    
      pulldownrefresh: this.pulldownrefresh,
      pullupload: this.pullupload,
    })

  this.scroll.on('pullingup',()=> {
    if(this.continuepullup){
      this.beforepullup();
      this.$emit("onpullup","当前状态：上拉加载");
    }
  });

  this.scroll.on('pullingdown',()=> {
    this.beforepulldown();
    this.$emit("onpulldown","当前状态：下拉加载更多");
  }); 
}

父组件在使用时，需要传入配置参数props以及处理子组件发射的事件，并且用具体的内容并替换掉 slot 标签

  <scroller 
    id="scroll"
    ref="scroll" 
    :datalist="filmlist"
    :pulldownrefresh="down_config"
    :pullupload="up_config"
    @onpullup="pulluphandle"
    @onpulldown="pulldownhandle"
   >

    <ul>
       <router-link class="film-list" v-for="(v,i) in filmlist" :key="v.id" tag="li" :to='{path:"/film-detail/"+v.id}'>
          <div class="film-list__img">
             <img v-lazy="v.images.small" alt="" />        
          </div>
          <div class="film-list__detail">
            <p class="film-list__detail__title">{{v.title}}</p>
            <p class="film-list__detail__director">导演：{{filterdirectors(v.directors)}}</p>
            <p class="film-list__detail__year">年份：{{v.year}}<span>{{v.stock}}</span></p>
            <p class="film-list__detail__type">类别：{{v.genres.join(" / ")}}<span></span></p>
            <p class="film-list__detail__rank">评分：<span>{{v.rating.average}}分</span></p>
          </div>             
        </router-link>
     </ul>     
   </scroller>

父组件可以通过this.$refs.xxx来获取到子组件，可以调用子组件里面的方法；

 computed:{
    scrollelement(){
      return this.$refs.scroll
    }
  }

完整的scroller组件内容如下

   <template>
     <div ref="wrapper" class="list-wrapper"> 
       <div class="scroll-content">    
         <slot></slot>
         <div>
           <pullingword v-show="!inpullup&&datalist.length>0" :loadingword="beforepullupword"></pullingword>
           <loading v-show="inpullup" :loadingword='pullingupword'></loading>
         </div>    
       </div> 

       <transition name="pulldown">
         <loading class="pulldown" v-show="inpulldown" :loadingword='pullingdownword'></loading>
       </transition> 
     </div>
   </template>


   <script >
    import bscroll from 'better-scroll'
    import loading from './loading.vue'
    import pullingword from './pulling-word'

    const pullingupword="正在拼命加载中...";
    const beforepullupword="上拉加载更多";
    const finishpullupword="加载完成";

    const pullingdownword="加载中...";

    export default {
     props: {
      datalist:{
       type: array,
       default: []
      },
      probetype: {
       type: number,
       default: 3
      },
      click: {
       type: boolean,
       default: true
      },  
      pulldownrefresh: {
       type: null,
       default: false
      },
      pullupload: {
       type: null,
       default: false
      },  
     },
     data() {
       return { 
         scroll:null,
         inpullup:false,
         inpulldown:false,
         beforepullupword,
         pullingupword,
         pullingdownword,
         continuepullup:true
       }
     },
      
     mounted() {
       settimeout(()=>{
         this.initscroll();

         this.scroll.on('pullingup',()=> {
           if(this.continuepullup){
             this.beforepullup();
             this.$emit("onpullup","当前状态：上拉加载");
           }
         });

         this.scroll.on('pullingdown',()=> {
           this.beforepulldown();
           this.$emit("onpulldown","当前状态：下拉加载更多");
         });

       },20)
       
     },
     methods: {
       initscroll() {
         if (!this.$refs.wrapper) {
           return
         }
         this.scroll = new bscroll(this.$refs.wrapper, {
           probetype: this.probetype,
           click: this.click,    
           pulldownrefresh: this.pulldownrefresh,
           pullupload: this.pullupload,
         })
       },
       beforepullup(){
         this.pullingupword=pullingupword;
         this.inpullup=true;
       }, 
       beforepulldown(){
         this.disable();
         this.inpulldown=true;
       },
       finish(type){
         this["finish"+type]();
         this.enable();
         this["in"+type]=false; 
       },
       disable() {
         this.scroll && this.scroll.disable()
       },
       enable() {
         this.scroll && this.scroll.enable()
       },
       refresh() {
         this.scroll && this.scroll.refresh()
       }, 
       finishpulldown(){
         this.scroll&&this.scroll.finishpulldown()
       },
       finishpullup(){
         this.scroll&&this.scroll.finishpullup()
       },   
     },
        
     watch: {
       datalist() {        
         this.$nexttick(()=>{
           this.refresh();            
         }) 
       }
     },
     components: {
       loading,
       pullingword
     }
    }

   </script>

具体内容可以查看github , 项目地址如下：https://github.com/linrunzheng/vueapp

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。