vue-scroller 滑动组件使用指南
2024-08-26 19:20:50
在页面中经常会用到滚动,下拉刷新,下拉加载等功能,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();滚动到内容的相对位置
最新文章
- 将list转换为datatable的方法
- php引入lucene方法
- java mail(发送邮件--163邮箱)
- Xcode报错:“Your build settings specify a provisioning profile with the UUID..... however, no such provisioning profile was found”
- SQLHelper 简介
- Mapnik 教程
- QT笔记(1)--QT编程环境搭建
- oracle ebs 12.20 安装成功其过程失败日记及总结(1)
- MySQL 5.7 for Windows 解压缩版配置安装
- jQuery:下拉列表的联动
- BOM和DOM的区别
- 数据库SQL语句中 查询选修了全部课程的学生的学号和姓名
- Linux时间子系统之(十六):clockevent
- destruct析构函数里操作文件出现的问题
- mysql安装密码策略插件
- ./configure: error: C compiler cc is not found
- HTTPS双向认证+USB硬件加密锁(加密狗)配置
- git的命令详解
- Ionic step by step (1)
- Docker实战(五)之端口映射与容器互联
热门文章
- archlinux安装nvidia-1050ti闭源驱动教程,亲测
- [CMS]Joomla 3.4.6-RCE漏洞复现
- Redis哨兵日常实践
- 【2019.10.17】十天Web前端程序员体验(软件工程实践第五次作业)
- java输出程序运行时间
- oracle清理归档日志(缓存)
- python 日期
- To avoid slowing down lookups on a near-full table, we resize the table when it&#39;s USABLE_FRACTION (currently two-thirds) full.
- Java基础 main 参数String[] args的用法
- 海思 Hi3516A Hi3518E V200 芯片介绍