vue-scroller 滑动组件使用指南

在页面中经常会用到滚动，下拉刷新，下拉加载等功能，vux的scroller可以使用，但是它不再维护，而且要配合load-more组件一起使用。所以一般在项目中我都是用vue-scroller.

vue-scroller文档

1.在项目中安装：

npm i vue-scroller -S

2.在main.js中引用

import VueScroller from 'vue-scroller'
Vue.use(VueScroller)

里面是滚动元素

4.使用技巧

（1）一般来说，我们都是在一个列表中使用这个滚动，经过实践，在使用scroller时，最好的布局方法是以下这种，一个外部的容器元素，将滚动标签和滚动内容包裹起来，然后这个外层元素进行定位，要是有头部标签需要留出header的高度，并且滚动容器的高度要减小，不然会出现滚动条，在手机上导致滚动到底部看不到头部的情况，在scroller里面再加一层容器的原因是一般scroller里面只有一个元素性能会比较好，滚动也比较流畅，不然可能会有滚动卡顿，上拉回弹等问题。

for="item in list">{{item}}

 .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();滚动到内容的相对位置

转载于:https://www.cnblogs.com/chenziyu/p/10271494.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！