vue+better-scroll 下拉刷新,上拉加载更多
better-scroll 来做下拉刷新和 上拉加载 特别方便。 安装好vue脚手架和better-scroll 之后 直接复制粘贴就可以看到效果了
<template>
<div class="rules">
<p class="drop-down" v-if="dropDown">松手刷新数据...</p>
<div class="bscroll" ref="bscroll">
<div class="bscroll-container">
<ul>
<li>1</li><li>1</li><li>1</li>
<li>1</li><li>1</li><li>1</li>
<li>1</li><li>1</li><li>1</li>
<li>1</li><li>1</li><li>1</li>
<li>1</li><li>1</li><li>1</li>
<li>1</li><li>1</li><li>1</li>
<li>1</li><li>1</li><li>1</li>
</ul>
</div>
</div>
<!-- <p class="x">加载更多...</p> -->
</div>
</template> <script>
import BScroll from 'better-scroll'
export default {
data(){
return{
dropDown:false
}
},
mounted(){
this.scrollFn()
},
methods:{
scrollFn(){
this.$nextTick(() => {
if (!this.scroll) {
this.scroll = new BScroll(this.$refs.bscroll, {
click: true,
scrollY: true,
probeType: 3
});
}else{
this.scroll.refresh();
}
this.scroll.on('scroll', (pos) => {
console.log(pos.y,this.dropDown)
//如果下拉超过50px 就显示下拉刷新的文字
if(pos.y>50){
this.dropDown = true
}else{
this.dropDown = false
}
})
//touchEnd(手指离开以后触发) 通过这个方法来监听下拉刷新
this.scroll.on('touchEnd', (pos) => {
// 下拉动作
if(pos.y > 50){
console.log("下拉刷新成功")
this.dropDown = false
}
//上拉加载 总高度>下拉的高度+10 触发加载更多
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)
});
}
}
}
</script> <style scoped>
.bscroll{
width: 100%;
height:500px;
overflow: hidden;
}
.bscroll-container{
background: #ff0000;
}
.drop-down{
position: absolute;
top:0px;
lefT:0px;
width: 100%;
height: 50px;
line-height:50px;
text-align: center;
font-size:0.8rem;
color:#CCC;
}
</style>
vue+better-scroll 下拉刷新,上拉加载更多的更多相关文章
- SwipeRefreshLayout实现下拉刷新上滑加载
1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...
- Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView
在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...
- juery下拉刷新,div加载更多元素并添加点击事件(二)
buffer.append("<div class='col-xs-3 "+companyId+"' style='padding-left: 10px; padd ...
- 移动端下拉刷新上拉加载-mescroll.js插件
最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...
- Android如何定制一个下拉刷新,上滑加载更多的容器
前言 下拉刷新和上滑加载更多,是一种比较常用的列表数据交互方式. android提供了原生的下拉刷新容器 SwipeRefreshLayout,可惜样式不能定制. 于是打算自己实现一个专用的.但是下拉 ...
- Android 自定义 ListView 上下拉动“刷新最新”和“加载更多”歌曲列表
本文内容 环境 测试数据 项目结构 演示 参考资料 本文演示,上拉刷新最新的歌曲列表,和下拉加载更多的歌曲列表.所谓"刷新最新"和"加载更多"是指日期.演示代码 ...
- vue mint-ui 框架下拉刷新上拉加载组件的使用
安装 npm i mint-ui -S 然后在main.js中引入 import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vue.us ...
- [ionic开源项目教程] - 第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll
第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll 1.将tab1.html的代码改为如下: <ion-content> <ion-ref ...
- JS+CSS实现的下拉刷新/上拉加载插件
闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...
- vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
随机推荐
- Batch基本知识
一般情况下,每条命令占据一行: 当然也可以将多条命令用特定符号(如:&:.&&:.|.||等)分隔后写入同一行中: 还有的情况就是像if.for等较高级的命令则要占据几行.几十 ...
- Application.StartupPath获取执行文件路径substring()取特定长度字符串取得根目录
Application.StartupPath获取执行文件路径substring()取特定长度字符串取得根目录 2012-07-20 10:48 257人阅读 评论(0) 收藏 举报 path usi ...
- 【Codeforces】 Round #374 (Div. 2)
Position:http://codeforces.com/contest/721 我的情况 开始还是rank1,秒出C.(11:00机房都走光了,我ma到11:05才走,只打了一个小时) 结果.. ...
- bzoj3505 [Cqoi2014]数三角形——组合数+容斥
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3505 好题啊好题...好像还曾经出现在什么智力测试卷中来着...当时不会现在还是无法自己推出 ...
- JSP-Runoob:JSP Session
ylbtech-JSP-Runoob:JSP Session 1.返回顶部 1. JSP Session HTTP是无状态协议,这意味着每次客户端检索网页时,都要单独打开一个服务器连接,因此服务器不会 ...
- 【转载】HashMap实现原理浅析
HashMap和Hashtable的区别 两者最主要的区别在于Hashtable是线程安全,而HashMap则非线程安全Hashtable的实现方法里面都添加了synchronized关键字来确保线程 ...
- centos语言设置
. echo $LANG可以查看当前使用的系统语言 . 在终端输入 locale命令,如有zh cn 表示已经安装了中文 . 安装中文语言包yum groupinstall chinese-suppo ...
- 手势识别官方教程(7)识别缩放手势用ScaleGestureDetector和SimpleOnScaleGestureListener
1.Use Touch to Perform Scaling As discussed in Detecting Common Gestures, GestureDetector helps you ...
- Linux下查看CPU和内存(很详细)
在系统维护的过程中,随时可能有需要查看 CPU 使用率,并根据相应信息分析系统状况的需要.在 CentOS 中,可以通过 top 命令来查看 CPU 使用状况.运行 top 命令后,CPU 使用状态会 ...
- 【Leetcode146】LRU Cache
问题描述: 设计一个LRU Cache . LRU cache 有两个操作函数. 1.get(key). 返回cache 中的key对应的 val 值: 2.set(key, value). 用伪代码 ...