vue 的上拉加载,下拉刷新(基于better-scrol)
我先吐槽下,这个vue 的上拉刷新前几次都是有现成的框架,来做的,这个better-scroll的我是真的一开始没有看懂,可能是自己太笨了吧,不过 写这个的真的是大神,很厉害,个人项目做的这么厉害,666附上地址
好了步入正题,这博客仅针对不是很熟悉vue 的上拉刷新的小白,虽然我也是小白,嘿嘿,大神请出门左拐
你是不是想实现下拉刷新(比较难点),上拉加载例如下面这样
如果你是想实现这样,那你就向下看,也许会能帮到你的,可惜没有时间上传githup 不然也是可以骗几个star 的
默认你已经搭建好了基础的vue脚手架及其引入了 better-scroll,不知道怎么引入的上面那个地址有方法
如果你 发现你按照 那个官网写的 你的竟然不能滚动,那你就 记得了,外面层要溢出隐藏,这个样式是最原始的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很不错的,移动端滑动和原生有得一拼,其实每个事情都需要换个角度想问题,不是为了问题而解决问题,而是换个思想角度去思考问题,也许你就知道,其实你想的没有那么复杂,就拿下来刷新来说,你得到你当前手指拖动滚动条的高度,这个可以得到吧,然后当超过那个高度的时候,你就可以执行你的方法,松手就停止,其实都是这样啊,不要想复杂了,同学
有问题可以留言哦,大家一起解决问题,一起成长,谢谢
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 在 Asp.Net Core WebAPI 中防御跨站请求伪造攻击
- Hash 算法有哪些?
- Cordova 运行 Web 应用
- SSH 端口转发小结
- Hive实现自增序列及元数据问题
- 手工将项目升级至 Angular 9 记录
- 备份和恢复 timescaledb 的超级表 (hypertables)
- CVE-2020-14644 weblogic iiop反序列化漏洞
- Ubuntu 17.10 安装折腾记录
- charles工具使用
- 干货 | 从0到1,搭建一个体系完善的前端React组件库
- LeetCode 01两数之和&02两数相加
- 给GitHub "彩蛋" readme 生成自定义统计信息
- Android |《看完不忘系列》之okhttp
- pt-osc改表过程中的中文乱码问题