上拉加载和下拉刷新是移动终端上常见的功能，常用于搜索或一些分类列表页面。

像水平滚动一样，我们仍然更好地使用库——滚动。As better更新了新版本，即0。0之前，更新后发现现在是1.2.6了，新版本有了更多好用的API，所以我也重写了之前的代码，用新的API实现了上拉加载和下拉刷新。

首先写基本风格，这里略过，然后介绍更好的卷轴库

从“更好滚动”导入b滚动。其次，在挂载的生命周期中实例化scroll，获得数据后可以获取new，也可以在new后调用refresh。

实例，您需要传入一个配置参数。由于参数很多，详情请参考文档。这里只有两个要点：

//是否启用下拉刷新可以传入为真也可以传入为假。如果需要更多配置，可以传入一个对象下拉刷新：{Threshold :80，stop 336040 }//是否启用上拉加载同上。上拉没有停止参数。这里需要注意的是负数pullpload:{ threshold :-80，}/* * * * @ paramthreshold触发器事件阈值，也就是下拉刷新后要滑动触发器多远* @param stop才能从顶部回滚距离(为了给加载留一点空间)*/或者更多的数字个人更适合。但是这里有一个问题，因为我是用淘宝flexible.js来适配的，这就导致：安卓下80的距离合适，但是iphone6s下27左右，因为缩放了3。

因此，不同缩放级别的屏幕需要乘以相应的缩放比例。

淘宝flexible.js其实有这个方法可以得到屏幕缩放比例。这里，直接从里面拿：

//在util . js { var is Android=window . navigator . app version . match(/Android/gi)中添加方法导出函数getdeviceratio()；var isIPhone=window . navigator . appversion . match(/iphone/gi)；var devicepixel ratio=window . devicepixel ratio；var dpr在if (isIPhone) {//iOS下，对于2屏和3屏，使用2倍方案，其余使用1倍方案if(devicepixel ratio=3){ DPR=3；} else if(devicepixellratio=2){ DPR=2；} else { DPR=1；}} else {//在其他设备下，dpr=1的方案仍被1次使用；}返回DPR}导入{device _ ratio}./base/js/api.js'/*获取当前缩放比例*/const device _ ratio=getdevice ratio()；/*下拉配置*/const down _ CONFIG={ threshold :80 * device _ ratio，stop336040 * device _ ratio}/*上拉配置*/const up _ CONFIG={ threshold 3360-80 * device _ ratio，} this . scroller=new BScroll(scrolwrap，{ click:true，probeType:3，pullDownRefresh:DOWN _ CONFIG，pullUpLoad:UP实例化后，下一步是监听上拉和下拉事件。BetterScroll增加了一些新事件，主要有：

/*下拉事件*/this.scroller.on('下拉'，()={ })；/*上拉事件*/this.scroller.on('上拉'，()={ })；在上拉或下拉事件被触发后，我们需要调用this.scroller.finishPullDown()或this.scroller.finishPullUp()来通知更好滚动事件它已经完成。

一般流程如下：

this.scroller.on('pullingDown '，()={！-1.发送数据请求-！-2.获取成功后，通知活动完成-！-3.修改数据数据，在下一个勾中调用refresh-}；通常，操作完成后，我们需要手动触发刷新方法来重新计算可滚动距离。因此，我们可以编写一个手表来监控数据的变化，这样我们只需要改变数据，而不是每次操作数据都调用refresh方法。

watch:{ dataList(){ this。$ NextTick(()={ this . scroller . refresh()；})}}，如果你使用的版本还是旧的，可以判断在on(scroll)事件的时候实现的功能

this.scroller.on('scroll '，(pos)={ //获取整个滚动列表的高度var height=getStyle(scroller，‘height’)；//获取滚动外层包的高度var页面高度=getStyle(scrollWrap，‘height’)；//触发事件需要的阀值定义变量距离=80 * DEVICe _ RATION//参数刷卡机为当前位置如果(位置。ydistance){//控制台。日志('下拉');//做点别的事情}如果(pos。y-页面高度-高度-距离){//控制台。日志('上拉');//做某事}为了防止多次触发，需要加2个开关类的东西；

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

最后，来封装成一个组件

模板div ref=' wrapper ' class=' list-wrapper ' div class=' roll-content '槽/槽/div/div/模板由于每个页面需要滚动的具体内容都是不一样的，所以用了一个插槽来分发。

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

导出默认值{ prop : { datalist : { type : Array，default: [] }，probeType: { type: Number，default: 3 }，单击： { type:布尔值，default: true }，下拉刷新： { type 3: null，default: false }，上拉组件挂载后，在事件触发时并不直接处理事件，而是向父级发送一个事件，父级通过在模板v-on接收事件并处理后续的逻辑

mounted(){ this。滚动=新的滚动(这.$refs.wrapper，{ probeType: this.probeType，click: this.click，下拉刷新this.pullUpLoad，this :pullpload，}) this.scroll.on('pullingUp '，()={ if(this。continuepullup){这个。pre pulp()；这个$emit('onPullUp '，'当前状态：上拉加载');} });this.scroll.on('pullingDown '，()={ this。以前下拉();这个$emit('onPullDown '，'当前状态：下拉加载更多');});}父组件在使用时，需要传入配置参数小道具以及处理子组件发射的事件，并且用具体的内容并替换掉狭槽标签

scroller id=' scroll ' ref=' scroll ' :目录='电影列表' :下拉刷新=' DOWN _ CONFIG ' : pull pload=' UP _ CONFIG ' @ OnPullUP=' pulphandle ' @ OnPullDown='下拉句柄' ul路由器-链接类='电影列表' v-for='(v，I)在filmList' :key='v.id '标记=' li ' :to=' { path:导演：{ {滤镜导演(v . directors)} }/p p class=' film-list _ _ detail _ _ year '年份：{ { v . year } } span { { v . stock } }/span/p p class=' film-list _ _ detail _ _ type '类别：{ { v .温柔。 join('/')} } span/span/p p class=' film-list _ _ detail _ _ rank '评分：span{{v.rating.average}}分/span/p/div/路由器链接/ul /Scroller父组件可以通过这个$refs.xxx来获取到子组件，可以调用子组件里面的方法；

computed : { scrollElement(){ 0返回此$ refs.scroll } }完整的背景常速滚动的电脑游戏组件内容如下

template div ref=' wrapper ' class=' list-wrapper ' div class=' roll-content ' slot/slot div拉动word v-show='！输入llupdata列表。长度0 ' :加载字='上拉字前'/拉字加载v-show='输入llup ' :加载字='拉字'/加载/div/div转换名称='下拉'加载类='下拉' v-show='输入向下' 3360加载字='下拉字'/加载/转换/div/模板脚本从更好-滚动“导入”从“加载”导入/正在加载。vue“导入来自”的提取单词./pulling-word“const pulling word=”正在拼命加载中.';'' const beforePullUpWord='上拉加载更多；'' const finishPullUpWord='加载完成；'' const PullingDownWord='加载中.'；导出默认值{ prop : { datalist : { type : Array，default: [] }，probeType: { type: Number，default: 3 }，单击： { type:布尔值，default: true }，下拉刷新： { type 3: null，default: false }，上拉这个。卷轴。on(' pullingp '，()={ if(this。continuepullup){这个。在pullp()之前；这个$emit('onPullUp '，'当前状态：上拉加载');} });this.scroll.on('pullingDown '，()={ this。以前下拉();这个$emit('onPullDown '，'当前状态：下拉加载更多');});}，20) }，methods: { initScroll() { if(！这个参考文献。包装){ return }这个。滚动=新的b croll(这.$refs.wrapper，{ probeType: this.probeType，单击： this .单击，下拉刷新： this。下拉刷新，pullUpLoad: this.pullUpLoad，}) }，beforupup(){ this .PullingUpWord=PullingUpWordthis。输入llup=真；}，之前下拉(){这个。disable()；这个。inputall down=true}，完成(类型){此[“完成”类型]();这个。enable()；这[' in ' type]=false；}，禁用(){ this。滚动这个。卷轴。disable()}，enable(){ this。滚动这个。卷轴。enable()}，refresh(){ this。卷轴。向下滚动()}，完成向上滚动()}，完成向上滚动(){ this。滚动这个。卷轴。finish pulp()}，}，watch: { dataList() { this .$ NextTick(()={ this。刷新()；}) } }，components: { Loading，PullingWord } } /script具体内容可以查看github，项目地址如下：https://github。com/linrunzheng/vueApp

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