一个简单的适用于Vue的下拉刷新,触底加载组件
一个简单的适用于Vue的上拉刷新,触底加载组件,没有发布npm需要时直接粘贴定制修改即可
<template>
<div class="list-warp-template"
@touchstart="handlerStart"
@touchend="handlerEnd"
@touchmove="handlerMove"
@scroll="handlerScroll"
ref="listWrapRef">
<div class="top-refresh" :style="{height: refresh.height + 'px'}">
<div v-show="refresh.height > 30">
{{refreshLoading ? '刷新中' : '松开刷新'}}
</div>
</div>
<div class="main-list">
<slot></slot>
</div>
<div class="bottom-loading" v-show="bottomLoading">加载中</div>
</div>
</template>
<script>
let timer = null
export default {
name: "ListWrap",
props: {
refreshLoading: {
type: Boolean,
default: false
}
},
data() {
return {
position: 0,
startInit: 0,
bottomLoading: false,
refresh: {
height: 0
}
}
},
created() {
},
watch: {
refreshLoading(val) {
if (!val) {
this.refresh.height = 0
}
}
},
computed: {},
mounted() {
},
methods: {
handlerScroll(e) {
const eDom = e.target
const scrollTop = e.target.scrollTop
// 判断是否到底了
let scrollPosition = eDom.scrollHeight - e.target.offsetHeight
if (timer) {
clearTimeout(timer)
}
// console.log(scrollPosition)
// console.log(scrollTop)
timer = setTimeout(() => {
this.bottomLoading = true
if (scrollPosition <= scrollTop) {
this.$emit('on-bottom')
}
}, 200)
this.position = scrollTop
// 滚动事件,返回当前滚动位置
this.$emit('on-scroll', scrollPosition)
},
// 返回顶部
handlerBackTop() {
const dom = this.$refs.listWrapRef
dom.scrollTop = 0
},
// 触摸开始
handlerStart(e) {
this.startInit = parseInt(e.touches[0].clientY)
},
// 滑动中,下拉
handlerMove(e) {
if (this.position === 0 && !this.refreshLoading) {
const Y = parseInt(e.touches[0].clientY)
const range = Y - this.startInit
this.refresh.height = range
}
},
// 滑动结束
handlerEnd() {
if (this.refresh.height >= 30) {
this.refresh.height = 40
this.$emit('on-refresh')
this.$emit('update:refreshLoading', true)
} else {
this.refresh.height = 0
}
this.startInit = 0
}
}
}
</script>
<style lang="scss">
.list-warp-template {
display: block;
height: 100vh;
overflow-y: auto;
.top-refresh {
background-color: #ccc;
height: 0;
width: 100%;
transition: height 0.1s linear;
overflow: hidden;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.main-list {
width: 100%;
}
.bottom-loading {
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: #999;
width: 100%;
background-color: #f0f0f0;
}
}
</style>
一个简单的适用于Vue的下拉刷新,触底加载组件的更多相关文章
- el-select实现下拉框触底加载更多
当下拉框需要展示的数据有很多时,几千甚至上万条,一次性全部请求回来再按照特定格式比如 id-name 去处理数据的话,不论是从接口还是前端,这个性能都不是很好,会造成下拉框初次打开时响应很慢,影响用户 ...
- Vue Scroller:Vue 下拉刷新及无限加载组件
Vue Scroller Vue Scroller is a foundational component ofVonic UI. In purpose of smooth scrolling, pu ...
- Vue 下拉刷新及无限加载组件
原文 https://github.com/wangdahoo/vue-scroller 主题 Vue.js Vue Scroller Vue Scroller is a foundational ...
- jQuery WeUI 组件下拉刷新和滚动加载的实现
最近在做手机版使用到了下拉刷新和滚动加载,记录一下实现过程: 一.引入文件 ? 1 2 3 4 <link rel="stylesheet" href="Conte ...
- 第三方 XListview 上拉加载、下拉刷新、分页加载和Gson解析
注意:此Demo用的是第三方的Xlistview.jar,需要复制me文件夹到项目中,两个XML布局文件和一张图片 把下面的复制到String中 <string name="xlist ...
- mui 动态加载数据出现的问题处理 (silder轮播组件 indexedList索引列表 下拉刷新不能继续加载数据)
mui-slider 问题:动态给mui的图片轮播添加图片,轮播不滚动. 解决:最后把滚动轮播图片的mui(".mui-slider").slider({interval: 300 ...
- SwipeRefreshLayout实现下拉刷新上滑加载
1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...
- 微信小程序下拉刷新 并重新加载数据
1.在json页面配置: { "enablePullDownRefresh": true } 2.调用刷新函数 onPullDownRefresh: function() { wx ...
- Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView
在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...
随机推荐
- HTTP基本定义
一.网络的简单定义: 1.http:是www服务器传输超文本向本地浏览器的传输协议.(应用层) 2.IP:是计算机之间相互识别通信的机制.(网络层) 3.TCP:是应用层通信之间通信.(传输层) IP ...
- 原生js常用方法
原生JavaScript设置cookie值 function setCookie(name, value, Hours) { var d = new Date(); var offset = 8; v ...
- (转) GEM透视阴影贴图
转载:小道 透视阴影贴图(Perspective Shadow Maps, PSMs)是由Stamminger和Drettakis在 SIGGRAPH 2002上提出的一种阴影贴图(Shadow Ma ...
- Python3 Tkinter-Entry
1.创建 from tkinter import * root=Tk() t1=Entry(root) t1.pack() root.mainloop() 2.绑定变量 from tkinter im ...
- PHP中通过preg_match_all函数获取页面信息并过滤变更为数组存储模式
// 1. 初始化 $ch = curl_init(); // 2. 设置选项 curl_setopt($ch, CURLOPT_URL, "http://test.com/index.js ...
- Mininet实验 MAC地址学习
实验目的 了解交换机的MAC地址学习过程. 了解交换机对已知单播.未知单播和广播帧的转发方式. 实验原理 MAC(media access control,介质访问控制)地址是识别LAN节点的标识.M ...
- SpringMVC拦截器实现登录认证(转发)
感谢原作者,转发自:http://blog.csdn.net/u014427391/article/details/51419521 以Demo的形式讲诉拦截器的使用 项目结构如图: 需要的jar:有 ...
- mysqlslap工具测试mysql DB的性能
mysqlslap的一个主要工作场景就是对数据库服务器做基准测试. 测试方法 1.测试工具:mysqlslap,mysqlslap是MySQL5.1.4之后自带的benchmark基准测试工具 ...
- cacti 安装perl 和XML::Simple
一.安装perl #tar zxvf perl-5.20.1.tar.gz #cd perl-5.20.1 #./Configure -de #make #make test #make in ...
- java-自定义标签&&JSTL标签库详解
自定义标签是Jav aWeb的一部分非常重要的核心功能,我们之前就说过,JSP规范说的很清楚,就是Jsp页面中禁止编写一行Java代码,就是最好不要有Java脚本片段,下面就来看一下自定义标签的简介: ...