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.

注意：在切换horizo​​ntalMode时，只有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 the isDownFresh prop is true.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 the isUpLoad prop is true.done should be called while you finish the ajax. However if horizonalMode enabled, there isn't done 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 component scroller and then use this.$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 required Number,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 移动端滚动插件