vue 移动端滚动插件
垂直滚动 (v-scroller)
A vue plugin for nesting scroller ,you can use it to expand more components such as banner,date-piacker and so on.
一个用于嵌套滚动器的vue插件,您可以使用它来扩展更多组件,例如banner,date-piacker等。
为什么制作这个插件 (Why making this plugin)
There are so many vue plugins on github,but i haven't found a suitable mini vue plugin for scroller.The best scroller plugin i have seen is the 'better-scroller',however it's not for vue especially.I decide to make a mini vue scroller plugin for my own company programs also for people who wanna use scroller simply.
github上有很多vue插件,但是我还没有找到适合滚动条的mini vue插件。我见过的最好的滚动条插件是“更好的滚动条”,但是它并不是特别适合vue的。我决定制作一个适用于我自己公司程序的mini vue滚动器插件,也适用于想简单使用滚动器的人。
您可以使用插件做什么 (What you can do with the plugin)
You can use it to make a scroller container includes pulling-refresh,infinite-loading and horizonal scroller also supporting nesting different direction scroller.
您可以使用它来制作包含拉动刷新,无限加载和水平滚动条的滚动条容器,还支持嵌套不同方向的滚动条。
如何使用 (How to use)
NPM install the v-scroller plugin
NPM安装v-scroller插件
yarn add v-scroller or npm install v-scroller --save
1.vue水疗 (1.vue spa)
import the plugin and use
导入插件并使用
import scroller from 'v-scroller'
import 'v-scroller/dist/v-scroller.css'
Vue.use(scroller)
2.脚本HTML (2.script html)
directly write the script,in deed you have to
insert the vue.js
script firstly直接编写脚本,实际上必须先
insert the vue.js
脚本
<link rel="stylesheet" href="node_modules/v-scroller/dist/v-scroller.css"></link >
<script src="node_modules/v-scroller/dist/v-scroller.js"></script>
use the component scroller directly in your vue spa file or the Vue instance
直接在vue spa文件或Vue实例中使用组件滚动条
<scroller />
演示代码 (DEMO Codes)
<template>
<!--verticalMode and infinite and refresh-->
<scroller
ref="scroll"
@downFresh="downfresh"
@upLoad="upload"
@scroll="showPosition"
@afterScroll="showPosition"
:snapping="snapping"
:smooth="smooth"
:isDownFresh="isDownFresh"
:isUpLoad="isUpLoad"
>
<div slot="nomore" class="nomore">there is nomore data~</div>
<ul>
<li :class="{active:index%2==0}" v-for="(item,index) of num" :key="item">number {{item}} item</li>
</ul>
</scroller>
<!--nesting scroller with horizonalMode and verticalMode-->
<scroller
ref="scroll"
:snapping="snapping"
@scroll="showPosition"
@afterScroll="showPosition"
>
<div class="_testBox" v-for="item of 20">
<scroller
@upLoad="upload"
:snapping="snapping"
:isUpLoad="isUpLoad"
:horizonalMode="horizonalMode"
>
<div class="boxRoom">
<div :class="{active:index%2==0}" class="box" v-for="(item,index) of num" :key="item">{{item}}</div>
</div>
</scroller>
</div>
<div slot="nomore" class="nomore">there is nomore data~</div>
</scroller>
<!--goTop using the scrollTo() function-->
<div class="record" @click="goTop">
x:{{left}},y:{{top}}
</div>
</template>
<script>
export default{
data(){
return{
num:[],
snapping:true,
isDownFresh:true,
isUpLoad:true,
smooth:true,
horizonalMode:true,
left:0,
top:0
}
},
created(){
for(let i=0;i<5;i++){
this.num.push(i)
}
},
methods:{
downfresh(done){
console.log('refreshing finished')
let b = this.num[0];
for(let i = b;i>=b-5;i--){
this.num.unshift(i);
}
done() // you should call the done to close the loading
},
upload(done){
console.log('infinite loading finished')
if(this.num[this.num.length-1]<25){
let b = this.num[this.num.length-1];
for(let i = b+1;i<=b+5;i++){
this.num.push(i);
}
done() // you should call the done to close the loading
}else{
this.$refs.scroll.closeLoad();
}
},
showPosition(){
let {x:left,y:top} = this.$refs.scroll.getPosition();
this.left = left;
this.top = top;
},
goTop(){
this.$refs.scroll.scrollTo(0,true);
this.showPosition();
}
}
}
</script>
It's suggested that write a single function for ajax in methods and then use the ajax function at the lifeCircle of created,you can continue to use it at the plugin emiting event -- upLoad.Like this:
建议在方法中为ajax写一个函数,然后在创建的lifeCircle中使用ajax函数,您可以在插件发射事件-upLoad中继续使用它。
created(){
//when the component created ,use the ajax function firstly
this.refreshData();
},
methods:{
refreshData(done){
const data = `telephone=${this.$store.state.BookOrderInfo.telephone}&start=${this.start}&limit=${this.limit}`
this.$http({
method:'POST',
url:this.$_URL+'/api/listHistoryRecord',
data:data
})
.then(
res=>{
if(res.data.code == '0000'){
//if nomore data from the back-end ,use the plugin function closeLoad()
if(res.data.data.length==this.History.length){
this.$refs.scroller.closeLoad();
}else{
this.History = res.data.data;
done()
}
}
})
.catch(
err=>console.log(err)
)
},
upLoad(done){
this.limit+=this.limit;//this is the length of data while you request the back-end
this.refreshData(done);
}
}
选件 (Options)
道具 (props)
prop name | description | required | default |
---|---|---|---|
snapping | [Boolean] enable snapping mode | no | false |
smooth | [Boolean] enable smooth scrolling | no | true |
isDownFresh | [Boolean] enable pull down to refresh | no | false |
isUpLoad | [Boolean] enable infinite loading | no | false |
horizonalMode | [Boolean] enable horizonal scroller mode | no | false |
道具名称 | 描述 | 需要 | 默认 |
---|---|---|---|
折断 | [Boolean] 启用捕捉模式 | 没有 | 假 |
光滑 | [Boolean] 启用平滑滚动 | 没有 | 真正 |
isDownFresh | [Boolean] 启用下拉刷新 | 没有 | 假 |
isUpLoad | [Boolean] 启用无限加载 | 没有 | 假 |
地平线模式 | [Boolean] 启用水平滚动条模式 | 没有 | 假 |
Notice:while switching horizonalMode,only upLoad is abled to work,it shows that scroll-right infinite loading also the emit event name is the same to
upLoad
.注意:在切换horizontalMode时,只有upLoad能够工作,这表明向右滚动无限加载,并且发射事件名称与
upLoad
相同。
发出事件 (emit events)
downFresh(done)
when you pull down your container at the top border,write your logic in it usually write the ajax.Make sure theisDownFresh
prop istrue
.done
should be called while you finish the ajax .downFresh(done)
当您在顶部边框拉下容器时,通常在其中写ajax来写逻辑。确保isDownFresh
为true
。done
ajax时应调用done
。upLoad(done)
when you scroll your container at the bottom border,write your logic in it usually write the ajax.Make sure theisUpLoad
prop istrue
.done
should be called while you finish the ajax. However ifhorizonalMode
enabled, there isn'tdone
available!当您在底部边框处滚动容器时,
upLoad(done)
,通常在其中写ajax来编写逻辑。确保isUpLoad
为true
。done
ajax时应调用done
。 但是,如果启用了horizonalMode
,则无法done
!beforeScroll
before you scroll just mean you touch the container.beforeScroll
之前的beforeScroll
只是意味着您触摸容器。scroll
when you're scrolling the container.scroll
容器时滚动。afterScroll
after you scroll just mean you raise your finger from the container.afterScroll
在滚动之后仅意味着您从容器中举起手指。
插件方法 (plugin methods)
Notice:You have to add
ref
to the componentscroller
and then usethis.$refs
to get following methods.注意:您必须将
ref
添加到组件scroller
,然后使用this.$refs
获得以下方法。
closeLoad (Function)
no param,forbid infinite loading animation,usually use when your ajax finished.closeLoad (Function)
没有参数,禁止无限加载动画,通常在ajax完成时使用。refreshLoad(Function)
no param,refresh infinite loading .refreshLoad(Function)
没有参数,刷新无限加载。getPosition (Function)
no param,get current position of scroller content.getPosition (Function)
没有参数,获取滚动条内容的当前位置。scrollTo (Function(Number,Boolean))
scroll to a position in scroller content,two params,the first param requiredNumber
,the second param isn't required ,it means whether open or close the scrolling animation.scrollTo (Function(Number,Boolean))
滚动到滚动条内容中的某个位置,两个参数,第一个参数为Number
,第二个参数为不需要,表示打开或关闭滚动动画。
插槽 (slots)
slot name | description | default | suggest |
---|---|---|---|
downfresh | animation during pull-down refresh | svg | add className spinner |
downfreshText | text during pull-down refresh | 下拉刷新 | |
upload | animation during infinite loading | svg | add className spinner |
nomore | text while foridden infinite loading | 没有更多内容了 | add className nomore |
插槽名称 | 描述 | 默认 | 建议 |
---|---|---|---|
downfresh | 下拉刷新过程中的动画 | svg | 添加className微调器 |
downfreshText | 下拉刷新期间的文本 | 拖动刷新 | |
upload | 无限加载期间的动画 | svg | 添加className微调器 |
nomore | 禁止无限加载时显示文字 | 没有更多内容了 | 不再添加className |
翻译自: https://vuejsexamples.com/a-mobile-vue-plugin-for-scroller/
vue 移动端滚动插件