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 ...
随机推荐
- jenkins之SSH Publishers环境变量
我使用的是docker部署jenkins,使用172.16.1.245作为部署服务器. 1.问题 在SSH Publishers里执行的环境变量,不是ssh server主机设置的环境变量,这样会导致 ...
- Spring boot druid 的配置使用
依赖加入 <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</artif ...
- sql查询性能调试,用SET STATISTICS IO和SET STATISTICS TIME---解释比较详细
一个查询需要的CPU.IO资源越多,查询运行的速度就越慢,因此,描述查询性能调节任务的另一种方式是,应该以一种使用更少的CPU.IO资源的方式重写查询命令,如果能够以这样一种方式完成查 ...
- Java8中LocalDate的使用---项目中日期处理
// 获取当前日期 LocalDate now = LocalDate.now(); // 设置日期 LocalDate now2 = LocalDate.of(2099, 2, 28); // 解析 ...
- useReducer介绍和简单使用(六)
上节课学习了useContext函数,那这节课开始学习一下useReducer,因为他们两个很像,并且合作可以完成类似的Redux库的操作.在开发中使用useReducer可以让代码具有更好的可读性和 ...
- 实现一个自己的IOC
实现一个自己的IOC package com.IocExample; import java.lang.reflect.Constructor; import java.lang.reflect.In ...
- Javascript事件派发-dispatchEvent
事件派发的作用: 1.派发数据,将一个封闭模块中的数据传递给另一个封闭模块.2.事件完成了较为复杂的解耦. 事件和回调函数不同在于: 1.事件可以在任意地方去获取,而回调函数只能在一个地方存在,如果需 ...
- Java基础 case穿透 多个case执行同一段代码
JDK :OpenJDK-11 OS :CentOS 7.6.1810 IDE :Eclipse 2019‑03 typesetting :Markdown code ...
- mailgun php 邮件发送 实例
步骤如下: 通过 composer 获取代码库 获取 API Key 以及 domain 编写代码发送邮件 1. 首先通过 composer 获取依赖代码库,参考官网给的命令 https://docu ...
- 全面系统Python3入门+进阶-1-7 课程内容与特点
结束