Skip to content

Commit

Permalink
添加refreshLoad方法,优化代码,解决小bug
Browse files Browse the repository at this point in the history
  • Loading branch information
chenchen committed Nov 15, 2017
1 parent 1e8cdb1 commit ba23f0f
Show file tree
Hide file tree
Showing 4 changed files with 18 additions and 11 deletions.
18 changes: 12 additions & 6 deletions ChineaseREADME.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
# v-scroller
> A Vue plugin for scroller
> A mobile Vue plugin for scroller
> pluginName: v-scroller
> version: 1.2.1
> version: 1.2.2
> author: Alan Chen
> github: alanchenchen@github.com
> date: 2017/10/24
> date: 2017/11/15
* 请注意:本插件只适配了移动端...有bug请直接提issue...

## 重要更新:
Expand All @@ -19,6 +18,12 @@
* 3.(重要) 模仿原生移动端app滚动,添加位移状态监测,确保每次位移过程中只会做一种方向的滚动(手指触摸过程),避免滚动重叠混乱
* 4.(重要) 解决嵌套scroller中下次滚动继承上次反向滚动运动的bug,现在不会出现突然位移飘的情况

## 最新更新:
* 1.修正实时滚动的坐标值
* 2.去除不必要的代码
* 3.去除禁止滚动层浏览器默认事件的设置,scroller层可以有其它的事件了,避免了scroller内路由跳转失效
* 4.(重要) 新增refreshLoad方法,用来刷新上拉加载,重置刷新容器功能,方法调用跟closeLoad方法一致

## 插件可以做什么?
* 此插件是大多ui库实现组件的基础插件,你可以直接拿来做移动端滚动,也可以使用下拉刷新和上拉加载容器,还可以嵌套多个scroller组件实现横向滚动和垂直滚动(`注意单个scoller只能一个方向滚动`)。插件暴露了一些方法,可以搭配写出回到顶部和banner等组件,搭配着钩子函数可以实时监测scroller滚动的位置来解决比较复杂的业务逻辑

Expand Down Expand Up @@ -60,7 +65,7 @@ Vue.use(scroller)
#### 组件自定义事件
* `downFresh ` 下拉刷新的自定义事件,直接将ajax逻辑写在里面,必须保证isDownFresh为true.
* `upLoad ` 上拉加载的自定义事件,直接将ajax逻辑写在里面,isUpLoad为true,可以通过组件自带的closeLoad()方法手动禁止加载然后不再请求数据.
* `upLoad ` 上拉加载的自定义事件,直接将ajax逻辑写在里面,必须保证isUpLoad为true,可以通过组件自带的closeLoad()方法手动禁止加载然后不再请求数据.
* `beforeScroll ` 滚动前,即手指刚触摸滑动区域,还未移动手指
* `scroll ` 手指滑动中,不包括手指抬起后的滚动动画状态
* `afterScroll ` 手指抬起,一般在此钩子结束后,滑动区域开启滚动动画
Expand All @@ -69,8 +74,9 @@ Vue.use(scroller)
> 注意:必须给scroller组件绑定一个ref,然后通过this.$refs拿到组件再调用下列方法,并没有在插件里集成实例方法
* `closeLoad (Function) ` 此函数不传参,调用后禁止上拉加载动画,一般用在upLoad函数里请求数据结束时调用
* `refreshLoad(Function) ` 此函数不传参,调用后重置上拉加载功能
* `getPosition (Function)` 此函数不传参,获取滚动区域的位移坐标值,返回一个对象,如{x:0,y:0},可以在钩子函数里调用,实时获取
* `scrollTo (Function(Number,Boolean)) ` 两个参数,第一个必选,是需要位移的终点坐标值,调用后自动判断是x位移还是y位置,第二个参数可选,默认为false,true表示滚动动画
* `scrollTo (Function(Number,Boolean)) ` 两个参数,第一个必选,是需要位移的终点坐标值,调用后自动判断是x位移还是y位移,第二个参数可选,默认为false,true表示有滚动动画

#### slots插槽

Expand Down
7 changes: 4 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,20 @@
> pluginName: v-scroller
> version: 1.2.1
> version: 1.2.2
> author: Alan Chen
> github: alanchenchen@github.com
> date: 2017/10/24
> date: 2017/11/15
#### This plugin is just only adapted for mobile.

## 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.

## Waht you can do with the plugin
## 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.

![horizonalMode](./horizonalMode.gif) ![verticalMode](./verticalMode.gif)
Expand Down Expand Up @@ -67,6 +67,7 @@ Vue.use(scroller)
> Notice:You have to add `ref` to the component `scroller` and then use this.$refs to get following methods.
* `closeLoad (Function) ` no param,forbid infinite loading animation,usually use when your ajax finished.
* `refreshLoad(Function) ` no param,refresh infinite loading .
* `getPosition (Function)` no param,get current position of scroller content.
* `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.

Expand Down
Loading

0 comments on commit ba23f0f

Please sign in to comment.