vue-scroller 滑动组件使用指南
在页面中经常会用到滚动,下拉刷新,下拉加载等功能,vux的scroller可以使用,但是它不再维护,而且要配合load-more组件一起使用。所以一般在项目中我都是用vue-scroller.
1.在项目中安装:
npm i vue-scroller -S
2.在main.js中引用
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)
3.在需要用到滚动的地方直接使用
<scroller>里面是滚动元素<scroller>
4.使用技巧
(1)一般来说,我们都是在一个列表中使用这个滚动,经过实践,在使用scroller时,最好的布局方法是以下这种,一个外部的容器元素,将滚动标签和滚动内容包裹起来,然后这个外层元素进行定位,要是有头部标签需要留出header的高度,并且滚动容器的高度要减小,不然会出现滚动条,在手机上导致滚动到底部看不到头部的情况,在scroller里面再加一层容器的原因是一般scroller里面只有一个元素性能会比较好,滚动也比较流畅,不然可能会有滚动卡顿,上拉回弹等问题。
<div class="scrollerWrap">
<scroller height="100%" :on-refresh="refresh" :on-infinite="infinite" ref="scrollerBottom">
<main class="scrollerContent">
<div v-for="item in list">{{item}}</div>
</main>
</scroller>
</div>
.scrollerWrap{
position:absolute;
width:100%;
height:90%;//有header的时候可能会出现滚动条,所以最好高度是除去header的高度
top:40px;//一般页面有header的时候需要留出header的高度
bottom:20px;
main{
height:100%;
}
}
(2)scroller提供的属性(常用):
onRefresh:下拉刷新
refresh(done){//下拉刷新
//your code
},
onInfinite:上拉加载
infinite(done){//上拉加载
if(this.isBottom){//当没有更多数据的时候结束加载
this.loadingTips ="无更多数据"
setTimeout(()=>{
done&&done(true);
},1000);
}else{//有更多数据时进行数据分页显示
setTimeout(() => {
this.page++;
this.getDataList(this.page);
this.$nextTick(() => {
this.$refs.scrollerBottom.reset()
})
},1500)
}
},
refreshText: 下拉刷新的提示文字
noDataText: 上拉加载没有数据的提示文字
(3)scroller提供的方法(常用):
getPosition(): 得到滚动区域当前的位置
scrollTo(): 滚动到页面的某一个位置
scrollBy();滚动到内容的相对位置
vue-scroller 滑动组件使用指南的更多相关文章
- Vue 2.0 组件库总结
UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...
- VUE常用UI组件插件及框架
UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - ...
- 一个 Vue 的滑动按钮组件
git 地址:https://github.com/SyMind/vue-sliding-button vue-better-slider 一个 Vue 的滑动按钮组件,有关滑动方面的处理借鉴 bet ...
- 基于vue项目的组件中导入mui框架初始化滑动等效果时需移除严格模式的问题
基于vue项目的组件中导入mui框架初始化滑动等效果时,控制台报错:Uncaught TypeError: 'caller', 'callee', and 'arguments' properties ...
- Vue Scroller:Vue 下拉刷新及无限加载组件
Vue Scroller Vue Scroller is a foundational component ofVonic UI. In purpose of smooth scrolling, pu ...
- 《Vue.js 2.x实践指南》 已出版
<Vue.js 2.x实践指南>其实在一年前就已经完稿了,只是由于疫情的缘故耽搁了很久才下厂印刷.阅读本书需要具备HTML.CSS和JS基础,本书针对的用户群体主要是:想要快速学习vue技 ...
- Vue 给子组件传递参数
Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...
- Vue.js说说组件
什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTM ...
- Vue.js多重组件嵌套
Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...
随机推荐
- MyBatis项目配置案例详解与Web下的增删改查实现[附项目源码]
MyBatis项目案例 项目图示: 项目源码地址:https://github.com/JluTiger/mybatispro 1.项目功能 项目案例:后台管理系统用户数据维护平台 所有用户数据查询 ...
- 使用Android的日志工具Log
Android中的日志工具类是Log,这个类中提供了5个方法来供我们打印日志 1.Log.v()用于打印那些最为琐碎的,意义最小的日志信息.对应级别verbose,是Android日志里面级别最低的一 ...
- fluent提供的边界条件解析【转载】
转载自:http://chengkang8.blog.163.com/blog/static/6719535620113149552369/ 1. 速度入口边界条件 用于定义流动入口边界的速度和标量 ...
- SignalR要求_转自:https://www.cnblogs.com/humble/p/3855137.html
SignalR 服务端组件可以被部署在诸多的服务器配置中,本节描述了它所支持的操作系统版本,.NET framework,IIS.以及其他组件 二.支持的服务器操作系统 SignalR服务端组件可以被 ...
- linux安装phantomjs,-bash: /usr/local/bin/phantomjs: is a directory解决方案
首先安装依赖——fontconfig和freetypeyum install fontconfig freetype2在官网上下载对应版本的包http://phantomjs.org/download ...
- 10分钟彻底理解Redis持久化和主从复制
在这篇文章,我们一起了解 Redis 使用中非常重要的两个机制:Reids 持久化和主从复制. 什么是 Redis 持久化? Redis 作为一个键值对内存数据库(NoSQL),数据都存储在内存当中, ...
- 英语语法 - 介词on/in/at与时间
介词滥用是中国学生的普遍缺点,主要是在语言学习的阶段没有人指正,形成有效的反馈,后面进入社会,就算别人发现你错了,也不会指正你,导致你一错再错. 看一篇教程,讲得不错.
- CMU Database Systems - Query Processing
Query Model Query处理有三种方式, 首先是Iterator model,这是最基本的model,又称为volcano,pipeline模式 他是top-down的模式,通过next函数 ...
- mysql批量更新update中的锁表机制
mysql的行锁是通过索引加载的,即行锁是加在索引响应的行上的,要是对应的SQL语句没有走索引,则会全表扫描,行锁则无法实现,取而代之的是表锁. CREATE TABLE SIMPLE_USER( I ...
- TreeFrog Framework : High-speed C++ MVC Framework for Web Application http://www.treefrogframework.org
TreeFrog Framework : High-speed C++ MVC Framework for Web Application http://www.treefrogframework.o ...