移动端无限滚动 TScroll.vue组件
// 先看使用TScroll.vue的几个demo
1.https://sorrowx.github.io/TScroll/#/
2. https://sorrowx.github.io/TScroll/#/simple-tscroll
3. https://sorrowx.github.io/TScroll/#/xunlei-live
4. https://sorrowx.github.io/TScroll/#/youliao
5. https://sorrowx.github.io/TScroll/#/my-video/1
github文档地址:https://github.com/SorrowX/TScroll
其实任意列表都可以使用该组件滚动,如果感兴趣的话就往下看看吧。
TScroll
TScroll.vue 一个Vue组件(TouchScroll)
1. 用来解决移动端列表的滚动
2. 使用姿势较为统一
3. 列表数据始终保持5屏左右的列表数据,所以当你滚动1w以上(其实随便多少条数据)的数据,父容器中的数据始终都是小于5屏左右的数据
4. 基于alloytouch.js和transform.js编写的一个Vue基础组件
TScroll.vue 使用姿势
<t-scroll
:pullUpData="pullUpData"
:pullDownData="pullDownData"
:renderDataList.sync="renderDataList"
v-bind="tScrollOptions"
ref="tScrollComp"
@pullUpLoading="loadMore"
@pullDownLoading="pullDownLoading"
@pullDownEnd="pullDownEnd"
@change="change"
>
<template>
<div ref="tscroll-pull-down" class="pulldown">释放加载</div>
<ul ref="tscroll-list-container">
<li
:key="item.data.num"
v-for="(item, index) in renderDataList"
>row {{JSON.stringify(item.data.num)}}</li>
</ul>
<div ref="tscroll-pull-up" class="loading">loading</div>
</template>
</t-scroll>
TScroll.vue props详细解释
data() {
return {
simpleScroll: '' // 如果有该属性(以下属性可以全部忽略了, 目前只支持'translateX'和'translateY'),则认为是个简单的滚动,不含上拉下拉加载数据功能
pullUpData: [], // 每次从服务器上拉获取的新数据
pullDownData: [], // 每次从服务器下拉获取的新数据
renderDataList: [], // 用于渲染列表的数据
tScrollOptions: {
scrollBarOption: { // 控制滚动条相关属性
show: true, // 是否开启滚动条
fade: false // true 表示当滚动停止的时候滚动条是否需要渐隐
},
scrollOption: {
excrMin: 45 + 48, // 多余的高度(滚动容器如果和屏幕高度一样,则该值为0,如果页面如果有头部和底部,需要减掉头部和底部的高度,则该值为头部的高度+底部的高度)
maxSpeed: 2, // 滚动最大速度
sensitivity: 1, // 滚动的灵敏度
pullDownDistance: 60, // 下拉距离(超过指定距离才触发下拉事件)
preventDefault: false // 是否阻止默认事件
}
}
}
}
TScroll.vue 事件详细解释
pullUpLoading 事件 暂无参数:
用户从下往上拉 滚动列表时,加载完当前服务器给的数据且出现加载dom时会触发该事件 pullDownLoading 事件 暂无参数:
用户从上往下拉 滚动列表时,当往下拉的距离大于pullDownDistance属性时,会触发该事件(注意: 该事件会多次触发) pullDownEnd 事件 暂无参数:
用户从上往下拉 释放列表时, 会触发该事件。列表会自动回弹到pullDownDistance高度,等下拉有新的数据时,会自动回弹到顶部 change 事件 参数(v 表示当前滚动的transformY值):
当用户滚动列表时, 会不断的触发该事件 touchStart 事件 参数(evt, property):
当用户触发列表容器时, 会触发该事件 touchMove 事件 参数(evt, property):
当用户在列表容器上滑动时, 会触发该事件 touchEnd 事件 参数(evt, current):
当用户在列表容器手指放开时, 会触发该事件 touchCancel 事件 参数(evt):
当touch事件取消时, 会触发该事件 animationEnd 事件 参数(current):
当用户在列表容器手指放开时且动画滚动结束时, 会触发该事件
TScroll.vue 实例一些有用的方法
scrollTo 方法: 滚动到指定的dom
参数(i, ms)
i: 如果指定Number类型的话, 会在指定ms毫秒内滚动到列表的第几个dom元素
如果指定String类型的话(只支持'top', 'bottom'), 会在指定ms毫秒内滚动到列表的顶部或者底部
如果指定HTMLLIElement类型的话, 会在指定ms毫秒内滚动到列表中该dom的位置
ms: Number 毫秒
返回值: undefined getAllData 方法: 获取所有的数据,就是从服务器每次请求的数据都push到该数组,
数组中的元素为对象,对象属性如下{ data: 就是服务器给的数据, dom: dom元素, translateY: css属性, removed: 该dom是否被移除了 }
无参数
返回值: Array(对象数组或者空数组) getListActualDom 方法: 获取列表容器中实际的dom元素(因为父容器始终会保持小于5屏左右的数据)
无参数
返回值: Array(dom数组或者空数组) clearListContainerDom 方法: 清空当前列表容器所有的孩子
参数(cb)
cb: Function 清空后的回掉(因为vue更新dom基本放到本次事件循环的末尾执行,所以提供个回掉)
返回值: undefined
TScroll.vue 更新日志
4月17日:
1.修复 少传excrMin参数,滑动列表时,内容会被清空的的bug (大部分参数都是可选的,所以没传了话,应该有默认值)
2.修复 下拉时滚动条高度不跟着变化的bug
3.修复 有simpleScroll属性就是简单滚动的情况下,列表最后一个dom被隐藏的bug 5月6日:
1.excrMin属性支持rem单位,可以为Number|String类型,number类型则为px单位
eg: excrMin: 44 和 excrMin: '44px' 效果一样; excrMin: '1.5rem'的话会根据当前的html的fontSize
计算出px值
5月7日:
1.TScroll组件实例新增clearListContainerDom方法,用于清空当前列表容器所有的孩子,其他状态相应的置为初始状态
2. demo详见 '视频'中的sv.vue组件使用姿势 5月14日:
1. 新增TScrollX.vue组件(主要是TScroll.vue组件的增强版)
2. 增强simpleScroll属性的功能,以前只支持垂直滚动,不支持水平滚动
3. 水平滚动只是简单的滚动,不含'像右滑动'或者'像左滑动'超过多少距离触发加载数据事件,事实上安卓和ios客户端也很少有这样的功能
4. 水平滚动只是简单的左右滚动,同时scrollTo api同样可以用
5. 该属性主要用于导航,等水平滚动功能使用。demo详见 '我的视频'中的video-header.vue组件使用姿势
6. 注: TScroll.vue 组件不含水平滚动
demo
效果详见 https://sorrowx.github.io/TScroll/#/ 4月10日:
新增首页和SimpleTscroll页面
4月16日:
新增迅雷直播首页
4月27日:
新增有料视频列表页和视频播放页(其视频接口已关闭,demo为同一个视频)
5月6日:
新增视频单页,和视频播放页(该demo主要用于自己本地视频播放娱乐的)
5月13日:
今天下午无聊重构了视频单页,改为"我的视频"
该单页比'视频'单页多了左右滑动时切换到新的tag功能,容器内容数据没有清空,而是一个tag导航对应一个tscroll容器,
分离了头部和视频内容组件,代码清晰多了
移动端无限滚动 TScroll.vue组件的更多相关文章
- 移动端自定义输入框的vue组件 ----input
<style scoped lang="less"> .keyboard { font-family: -apple-system, BlinkMacSystemFon ...
- 移动端自定义键盘的vue组件 ----keyboard
<style scoped lang="less"> .keyboard { /* height: 250px; */ width: 100%; position: f ...
- 【转】超酷的 mip-infinitescroll 无限滚动(无限下拉)
写在前面 无限滚动技术(又叫做无限下拉技术)被广泛应用于新闻类,图片预览类网站.对用户来讲,使用无限滚动的页面有源源不断的信息可以预览,增加用户在页面的停留时长.技术上原理也很简单,在页面加载时加载一 ...
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...
- 一个 VUE 组件:实现子元素 scroll 父元素容器不跟随滚动(兼容PC、移动端)
介绍 我们经常遇到一种情况.当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至body容器.这是浏览器默认的滚动行为. 但是很多情况,我们想要子元素滚 ...
- Vue组件封装之无限滚动列表
无限滚动列表:分为单步滚动和循环滚动两种方式 <template> <div class="box" :style="{width:widthX,hei ...
- vue 无限滚动问题
如今web开发中,无限加载是必需的一项功能,尤其是在移动端开发中,一个列表往往默认只加载10条,想看更多只能逐渐往下翻页.那么今天就看看如何在Vue-Cli中实现这个功能. 当前找到两个插件 1 el ...
- 一个超详细vue无限滚动vue-infinite-scroll插件的配置及使用详解
开发中总会遇到这种下拉加载的设计方案,Vue实现下拉加载最佳方案自然是使用vue-infinite-scroll来实现.接下来我们一起看下它的配置及使用方式. 首先我们先了解下他的配置参数: v-in ...
- webAPP如何实现移动端拍照上传(Vue组件示例)?
摘要:使用HTML5编写移动Web应用,主要是为了尝试一下“一套代码多处运行”,一个webapp几乎可以不加修改的运行在PC/Android/iOS等上面运行.但是写到现在觉得虽然这种方式弊大于利,不 ...
随机推荐
- RabbitMQ消息队列(七)-通过fanout模式将消息推送到多个Queue中(.Net Core版)
前面第六章我们使用的是direct直连模式来进行消息投递和分发.本章将介绍如何使用fanout模式将消息推送到多个队列. 有时我们会遇到这样的情况,多个功能模块都希望得到完整的消息数据.例如一个log ...
- XSS Reflected 测试
由于最近在做XSS方面的测试,于是找到了DVWA平台进行实验测试,通过这三篇文章让大家了解XSS方面的大概内容,这三篇文章只是把你领进XSS的大门,要想真正深入的学习XSS,你还需要去学习很多东西来提 ...
- Linux基础知识第八讲,系统相关操作命令
目录 Linux基础知识第八讲,系统相关操作命令 一丶简介命令 2.磁盘信息查看. 3.系统进程 Linux基础知识第八讲,系统相关操作命令 一丶简介命令 时间和日期 date cal 磁盘和目录空间 ...
- Java开发知识之Java的正则表达式
目录 正则表达式 一丶什么是正则表达式 1.正则表达式简介 2.无正则表达式判断代码 3.使用正则表达式代码. 二丶正则表达式API 三丶正则表达式语法格式 1.正则表达式语法 正则表达式 一丶什么是 ...
- Jenkins持续集成01—Jenkins服务搭建和部署
一.介绍Jenkins 1.Jenkins概念 Jenkins是一个功能强大的应用程序,允许持续集成和持续交付项目,无论用的是什么平台.这是一个免费的源代码,可以处理任何类型的构建或持续集成.集成Je ...
- [VsCode] 开发所使用的VsCode的插件
vscode 的插件 必须 Chinese (Simplified) Language Pack for Visual Studio Code Markdown Preview Enhanced De ...
- WPF 窗口大小自适应
在设置桌面不同分辨率以及较大DPI下,窗口如何显示的问题. 方案一 设置窗口最大值和最小值显示 通过对比当前屏幕的可显示区域,将窗口高宽最大值和最小值,设置为窗口的实际高宽(此例中仅设置高度) 界面设 ...
- Spring学习心得--------bean-Factory
在学习Spring框架的过程中发现,Spring中的bean不仅是对javabean的一种封装,让你可以通过beanfactoryAPI读取自己配置的beans.xml文件来实现javabean的设置 ...
- Asp.Net MVC 读取json文件
有些系统上面的配置可以做成config里面的appsetting.这里要求写在json文件里面. 首先 添加命名空间 using Newtonsoft.Json; using System.IO; u ...
- 【代码笔记】Web-CSS-CSS background背景
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...