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

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

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

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

rush:js;"> import BScroll from 'better-scroll'

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

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

rush:js;"> //是否开启下拉刷新，可传入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里面其实已经有这个获取屏幕缩放比方法，这里直接从里面拿：

= 3) { dpr = 3; } else if (devicePixelRatio >= 2){ dpr = 2; } else { dpr = 1; } } else { // 其他设备下，仍旧使用1倍的方案 dpr = 1; } return dpr }

rush:js;"> import{ DEVICE_RATIO} from '../base/js/api.js' /*获取当前缩放比*/ const DEVICE_RATIO=getDeviceRatio();

/下拉配置/
const DOWN_CONfig={
threshold:80DEVICE_RATIO,stop:40DEVICE_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('pullingUp',()=>{});

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

大致的流程是这样的：

{

});

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

{ this.scroller.refresh(); }) } },

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

{ //获取整个滚动列表的高度 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个开关类的东西;

rush:js;"> var onPullUp=true;

var onPullDown=true;

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

最后，来封装成一个组件

rush:js;">

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

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

rush:js;"> 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,}

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

this.scroll.on('pullingUp',()=> {
if(this.continuePullUp){
this.beforePullUp();
this.$emit("onPullUp","当前状态：上拉加载");
}
});

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

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

rush:js;">

<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"&gt;
         <img v-lazy="v.images.small" alt="" />        
      </div>
      <div class="film-list__detail"&gt;
        <p class="film-list__detail__title"&gt;{{v.title}}</p>
        <p class="film-list__detail__director"&gt;导演：{{filterDirectors(v.directors)}}</p>
        <p class="film-list__detail__year"&gt;年份：{{v.year}}<span>{{v.stock}}</span></p>
        <p class="film-list__detail__type"&gt;类别：{{v.genres.join(" / ")}}<span></span></p>
        <p class="film-list__detail__rank"&gt;评分：<span>{{v.<a href="https://www.jb51.cc/tag/rating/" target="_blank" class="keywords">rating</a>.average}}分</span></p>
      </div>             
    </router-link>
 </ul>

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

rush:js;"> computed:{ scrollElement(){ return this.$refs.scroll } }

完整的scroller组件内容如下

rush:js;">

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

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

原文地址：https://www.jb51.cc/vue/36514.html

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

相关推荐