vue 的上拉加载，下拉刷新（基于better-scrol）
我先吐槽下，这个vue 的上拉刷新前几次都是有现成的框架，来做的，这个better-scroll的我是真的一开始没有看懂，可能是自己太笨了吧，不过 写这个的真的是大神，很厉害，个人项目做的这么厉害，666附上地址https://github.com/ustbhuangyi/better-scroll好了步入正题，这博客仅针对不是很熟悉vue 的上拉刷新的小白，虽然我也是小白，嘿嘿，大神请...
·
我先吐槽下，这个vue 的上拉刷新前几次都是有现成的框架，来做的，这个better-scroll的我是真的一开始没有看懂，可能是自己太笨了吧，不过 写这个的真的是大神，很厉害，个人项目做的这么厉害，666附上地址
- 好了步入正题，这博客仅针对不是很熟悉vue 的上拉刷新的小白，虽然我也是小白，嘿嘿，大神请出门左拐
- 你是不是想实现下拉刷新（比较难点），上拉加载例如下面这样
- 如果你是想实现这样，那你就向下看，也许会能帮到你的，可惜没有时间上传githup 不然也是可以骗几个star 的
- 默认你已经搭建好了基础的vue脚手架及其引入了 better-scroll，不知道怎么引入的上面那个地址有方法
5.
- 如果你 发现你按照 那个官网写的 你的竟然不能滚动，那你就 记得了，外面层要溢出隐藏，这个样式是最原始的css，没有预处理器是因为，，，，，因为没有安装 ，你按照我写的操作应该是可以滚动的，嘿嘿
- 然后基本上实现了大半了，你要理解一件事，上拉刷新和下拉加载是根据什么原理，去判断的，是高度，是高度，根据你滚动条的距离来判断的，万变不离js，最原始的js的方法
- 先看看 better-scroll 提供的方法有那些
props: {
/**
* 1 滚动的时候会派发scroll事件，会截流。
* 2 滚动的时候实时派发scroll事件，不会截流。
* 3 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
*/
probeType: {
type: Number,
default: 3
},
/**
* 点击列表是否派发click事件
*/
click: {
type: Boolean,
default: true
},
/**
* 是否开启横向滚动
*/
scrollX: {
type: Boolean,
default: false
},
/**
* 是否派发滚动事件
*/
listenScroll: {
type: Boolean,
default: false
},
/**
* 列表的数据
*/
data: {
type: Array,
default: null
},
/**
* 是否派发滚动到底部的事件，用于上拉加载
*/
pullup: {
type: Boolean,
default: true
},
/**
* 是否派发顶部下拉的事件，用于下拉刷新
*/
pulldown: {
type: Boolean,
default: true
},
/**
* 是否派发列表滚动开始的事件
*/
beforeScroll: {
type: Boolean,
default: false
},
/**
* 当数据更新后，刷新scroll的延时。
*/
refreshDelay: {
type: Number,
default: 20
}
}
- 这个在那个官网里面也有，你可以先看看，这个就很重要了，你要的都在这里
touchEnd 很重要，这个是什么我就不解释了吧 不知道去看看W3C
- 接下来，虽然我也不想做伸手党，但是有些人就是想要，那就成全你呗
<template>
<div class="wrapper" ref="wrapper">
<ul class="content">
<div class="newxin" v-if="down"> { { pulldownTip.text } }
</div>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<li>喵喵喵</li>
<div class="newxin" v-if="up"> { { pulldownTip.textup } }
</div>
</ul>
</div>
</template>
<script>
import BScroll from 'better-scroll';
export default {
data() {
return {
loadingConnecting: false,
down: false,
up: true,
pulldownTip: {
text: '下拉刷新', // 松开立即刷新
textup: '上拉加载更多', // 松开立即刷新
rotate: '' // icon-rotate
}
};
},
mounted() {
setTimeout(() => {
this.BS();
}, 20);
},
watch: {
// 监听数据的变化，延时refreshDelay时间后调用refresh方法重新计算，保证滚动效果正常
data() {
setTimeout(() => {
this.BS();
}, this.refreshDelay);
}
},
methods: {
BS() {
if(!this.$refs.wrapper) {
return;
}
// better-scroll的初始化
this.scroll = new BScroll(this.$refs.wrapper, {
probeType: this.probeType,
click: this.click,
scrollX: this.scrollX
});
this.scroll.on('scroll', pos => {
console.log(pos.y);
//如果下拉超过50px 就显示下拉刷新的文字
if(pos.y > 50) {
this.pulldownTip.text = "放手刷新"
this.down = true
} else {
this.down = false
}
});
//touchEnd 通过这个方法来监听下拉刷新
this.scroll.on('touchEnd', pos => {
// 下拉动作
if(pos.y > 50) {
console.log('下拉刷新成功');
console.log('这里执行你方法');
this.down = false;
}
if(this.scroll.maxScrollY > pos.y + 10) {
console.log('加载更多');
//使用refresh 方法 来更新scroll 解决无法滚动的问题
this.scroll.refresh();
}
console.log(this.scroll.maxScrollY + '总距离----下拉的距离' + pos.y);
});
console.log(this.scroll.maxScrollY);
}
},
props: {
/**
* 1 滚动的时候会派发scroll事件，会截流。
* 2 滚动的时候实时派发scroll事件，不会截流。
* 3 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
*/
probeType: {
type: Number,
default: 3
},
/**
* 点击列表是否派发click事件
*/
click: {
type: Boolean,
default: true
},
/**
* 是否开启横向滚动
*/
scrollX: {
type: Boolean,
default: false
},
/**
* 是否派发滚动事件
*/
listenScroll: {
type: Boolean,
default: false
},
/**
* 列表的数据
*/
data: {
type: Array,
default: null
},
/**
* 是否派发滚动到底部的事件，用于上拉加载
*/
pullup: {
type: Boolean,
default: true
},
/**
* 是否派发顶部下拉的事件，用于下拉刷新
*/
pulldown: {
type: Boolean,
default: true
},
/**
* 是否派发列表滚动开始的事件
*/
beforeScroll: {
type: Boolean,
default: false
},
/**
* 当数据更新后，刷新scroll的延时。
*/
refreshDelay: {
type: Number,
default: 20
}
}
}
;
</script>
<style>
* {
margin: 0px;
padding: 0px;
}
.wrapper {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
}
.wrapper .content {
width: 100%;
}
.wrapper .content li {
background-color: #ffffff;
width: 100%;
height: 66px;
text-align: center;
line-height: 66px;
border-bottom: solid 1px #f0f0f0;
}
/* 刷新 */
.newxin {
width: 100%;
height: 50px;
text-align: center;
line-height: 50px;
background: red;
}
</style>
- 以上基本就是vue 的上拉刷新了，我觉得 better-scroll很不错的，移动端滑动和原生有得一拼，其实每个事情都需要换个角度想问题，不是为了问题而解决问题，而是换个思想角度去思考问题，也许你就知道，其实你想的没有那么复杂，就拿下来刷新来说，你得到你当前手指拖动滚动条的高度，这个可以得到吧，然后当超过那个高度的时候，你就可以执行你的方法，松手就停止，其实都是这样啊，不要想复杂了，同学
有问题可以留言哦，大家一起解决问题，一起成长，谢谢
前往低代码交流专区
更多推荐
4
0- 0
已为社区贡献2条内容
所有评论(0)