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 下拉刷新,上拉加载更多的更多相关文章

  1. SwipeRefreshLayout实现下拉刷新上滑加载

    1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...

  2. Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView

    在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...

  3. juery下拉刷新,div加载更多元素并添加点击事件(二)

    buffer.append("<div class='col-xs-3 "+companyId+"' style='padding-left: 10px; padd ...

  4. 移动端下拉刷新上拉加载-mescroll.js插件

    最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...

  5. Android如何定制一个下拉刷新,上滑加载更多的容器

    前言 下拉刷新和上滑加载更多,是一种比较常用的列表数据交互方式. android提供了原生的下拉刷新容器 SwipeRefreshLayout,可惜样式不能定制. 于是打算自己实现一个专用的.但是下拉 ...

  6. Android 自定义 ListView 上下拉动“刷新最新”和“加载更多”歌曲列表

    本文内容 环境 测试数据 项目结构 演示 参考资料 本文演示,上拉刷新最新的歌曲列表,和下拉加载更多的歌曲列表.所谓"刷新最新"和"加载更多"是指日期.演示代码 ...

  7. vue mint-ui 框架下拉刷新上拉加载组件的使用

    安装 npm i mint-ui -S 然后在main.js中引入 import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vue.us ...

  8. [ionic开源项目教程] - 第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll

    第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll 1.将tab1.html的代码改为如下: <ion-content> <ion-ref ...

  9. JS+CSS实现的下拉刷新/上拉加载插件

    闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...

  10. vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

随机推荐

  1. 51nod 1642 区间欧拉函数 && codeforce594D REQ

    画一下柿子就知道是求区间乘积乘区间内所有质因数的(p-1)/p(就是求欧拉的公式嘛) 看上去莫队就很靠谱然而时间O(nsqrt(n)logn)并不资瓷 还是离线,确定右端点,对于1~i的区间内的质因数 ...

  2. codeforces round #416 div2

    A:暴力模拟 #include<bits/stdc++.h> using namespace std; int a, b; int main() { scanf("%d%d&qu ...

  3. struts2标签---备忘录

    <s:form action="sloginAction" method="post"> <s:textfield label="用 ...

  4. ARM VM安装Linux Diagnostic 2.3扩展

    目前创建的Azure Linux虚拟机默认安装的是LAD 3.0,如果客户有特殊需求,可以通过如下方法安装LAD 2.3 1.在Azure Portal卸载LAD 3.0 2.使用Azure Powe ...

  5. An problem about date 根据年月日计算 星期几

    /W = (d+2*m+3*(m+1)/5+y+y/4-y/100+y/400) mod 7(1.2月需要看作上一年的13.14月) #include<stdio.h> #include& ...

  6. python 画图

    1.根据实际图形,用符号画出原来图形 from PIL import Image import argparse #命令行输入参数处理 parser = argparse.ArgumentParser ...

  7. drawable的文件名大写

    drawable的文件名大写导致的R文件消失!!!1

  8. 【洛谷2624_BZOJ1005】[HNOI2008] 明明的烦恼(Prufer序列_高精度_组合数学)

    题目: 洛谷2624 分析: 本文中所有的 "树" 都是带标号的. 介绍一种把树变成一个序列的工具:Prufer 序列. 对于一棵 \(n\) 个结点的树,每次选出一个叶子(度数为 ...

  9. .net framework 3.5 安装报错 0x800F0954问题

    windows Server 2019 .net framework 3.5 安装报错 0x800F0954问题 .net framework 3.5的安装教程:但是安装出现0x800F0954这个错 ...

  10. Struts2 之 实现文件上传(多文件)和下载

    Struts2  之 实现文件上传和下载 必须要引入的jar commons-fileupload-1.3.1.jar commons-io-2.2.jar 01.文件上传需要分别在struts.xm ...