今天做了一个项目,想更完美一点所以增加了一个下拉刷新的方法那就是vue-scroller插件,下面直接上代码介绍一下具体的使用方法:
首先我们需要安装一下这个方法:
npm i vue-scroller -S
安装完成,随即在main.js导入并注册在Vue上
// 引入下拉刷新
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)
接下来就是放在代码中使用
<template>
<div>
<scroller class="sroll"
:on-refresh="refresh"
:on-infinite="infinite"
refresh-layer-color="#FBD391"
loading-layer-color="#FBD391"
refreshText="refresh"
noDataText="no data"
ref="myScroller">
<ul>
<li>{{item}}</li>
</ul>
</scroller>
</div>
</template>
<script>
export default{
data(){
return{
}
},
methods:{
// 下拉刷新
refresh(){
//要刷新的数据请求
//关闭loading
this.timeout = setTimeout(()=>{
this.$refs.myScroller.finishPullToRefresh()
}, 2000)
},
infinite(){
console.log('上拉加载');
this.$refs.myScroller.finishInfinite(true)
}
}
}
</script>
<style lang="less" scoped>
//设置scroller距离顶部的距离,移动端开发顶部会有个head组件(我移动端适配采用vw,所以直接输入px单位)
.sroll{
top: 176px;
}
//解决底部出现大量空白,以及列表项显示不全的问题
._v-container > ._v-content > .pull-to-refresh-layer {
width:100%;
height:120px;
margin-top:-120px;
text-align:center;
font-size:32px;
color:#AAA;
float:left;
top:0;
left:0;
}
</style>
下面介绍一下scroller的属性以及方法使用:
Attr. Name | Description | Required | Default Value |
---|---|---|---|
onRefresh | 下拉刷新 | N | 事件 |
onInfinite | 上拉加载 | N | 事件 |
refreshText | 下刷新的提示信息 | N | 下拉刷新 |
noDataText | 全部数据加载完的提示 | 没有更多数据 | |
width | scroller container width | N | 100% |
height | scroller container height | N | 100% |
snapping | snapping width | N | 100 (stand for 100px) |
snappingHeight | snapping height | N | 100 |
refresh-layer-color | 下拉刷新的loading颜色 | N | #666666 |
loading-layer-color | 下拉加载的loading颜色 | N | #666666 |
minContentHeight | min content height (px) of scroll-content | N | 0 |
Scroller vm instance methods:
目前先总结这么多,欢迎小伙伴们留言评论。。。。
resize()
resize scroller content (已经废弃)triggerPullToRefresh()
触发下拉刷新finishPullToRefresh()
完成下拉刷新.可以手动调用finishInfinite(isNoMoreData :Boolean)
当参数为false时,上拉获取数据可以重新调用。当参数为true,上拉获取数据回调函数停止使用,下拉下部不再显示loading,会显示‘’暂无更多数据scrollTo(x:Integer, y:Integer, animate:Boolean)
scroll to a position in scroller contentscrollBy(x:Integer, y:Integer, animate:Boolean)
scroll by a position in scroller contentgetPosition :Object
get current position of scroller content