移动端基于iscroll5实现的仿原生下拉刷新,上拉加载效果(原创)

所属分类:输入,UI-拖和放,滚动,加载

 28009  337  查看评论 (17)
分享到微信朋友圈
X
移动端基于iscroll5实现的仿原生下拉刷新,上拉加载效果(原创) ie兼容10

更新时间:2018/11/22 上午8:54:58

更新说明:新增移动端rem适配插件


发布时间:2018-11-22 0:59

注意:此插件是基于移动端开发,最佳浏览效果是使用手机或者浏览器的开发工具菜单栏里的模拟器进行浏览。

最近项目使用了iScroll5,于是试着做了一个移动端的下拉刷新,上拉加载的效果,但是发现无论如何都不能完美的有原生的效果。仔细检查了下,发现iScroll5中当重置位置的时候,如果当前Y坐标大于0,则固定滚动回0,无法动态设置。于是简单看了下源码,修改了以下几个地方。

1. 打开iscroll-probe.js文件

2. 找到:

this.maxScrollX     = this.wrapperWidth - this.scrollerWidth;  
this.maxScrollY     = this.wrapperHeight - this.scrollerHeight;

更改为:

this.minScrollX     = 0;  
this.minScrollY     = 0;  
this.maxScrollX     = this.wrapperWidth - this.scrollerWidth;  
this.maxScrollY     = this.wrapperHeight - this.scrollerHeight;

3. 找到:

if ( !this.hasHorizontalScroll || this.x > 0 ) {  
   x = 0;
} else if ( this.x < this.maxScrollX ) {
   x = this.maxScrollX;
}
if ( !this.hasVerticalScroll || this.y > 0 ) {  
   y = 0;
} else if ( this.y < this.maxScrollY ) {
   y = this.maxScrollY;
}

更改为:

if ( !this.hasHorizontalScroll || this.x > 0 ) {  
   x = this.minScrollX;
} else if ( this.x < this.maxScrollX ) {
   x = this.maxScrollX;
}
if ( !this.hasVerticalScroll || this.y > 0 ) {  
   y = this.minScrollY;
} else if ( this.y < this.maxScrollY ) {
   y = this.maxScrollY;
}

现在当你下拉的时候,就可以根据情况动态的修改实例的minScrollY属性来调整你的效果

相关插件-拖和放,滚动,加载

jQuery拖拽拖放插件DAD

DAD 是一款基于 jQuery 的拖拽拖放插件,它支持常见的水平拖放、垂直拖放、多行拖放、指定拖放区域、回调函数、允许禁止拖放等等,同时你也可以稍加改造,做成类似垃圾篓、购物车等效果。
  拖和放
 79453  651

jquery拖动排序插件Nestable

jquery拖动排序插件Nestable
  拖和放
 86767  474

图标拖拽效果,兼容所有浏览器

原生JS实现图标图片拖拽,封装好了,可以直接拿去使用
  拖和放
 38568  374

鼠标轨迹跟随

鼠标轨迹跟随
  拖和放
 38445  310

讨论这个项目(17)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    w11010101 0
    2019/10/9 10:55:50
    滚动内容不足一屏时,无法滚动? 回复
    ?长街与风 0
    2019/4/3 14:16:20
    请问common,js里写的《div》作用是什么呢
        ζ??不 ??羁 ???0
        2019/4/9 12:37:11
        那是自己封装的loading方法
    回复
    ?长街与风 0
    2019/4/3 11:41:23
    上拉刷新和下拉加载有点迷
        ζ??不 ??羁 ???0
        2019/4/9 12:37:58
        你可以看下 iscroll5 的 api
    回复
    phper 0
    2019/3/16 20:04:00
    怎么去除上拉刷新??? 回复
    XZQ 0
    2018/12/26 17:33:39
    哪位大神会用这个插件,求指教
        尤安??0
        2019/2/21 10:57:41
        i now
    回复
    XZQ 0
    2018/12/26 17:32:14
    各位楼主 这个插件有没有人会,下载下来不太会用
        ζ??不 ??羁 ???0
        2018/12/27 9:13:29
        iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件,具体的参数可以去看iscroll的文档
        XZQ0
        2018/12/27 11:14:05
        我是后端的,前台技术不太熟悉,iscroll的文档 看过了,依照上面的还是不太会用,后端拿到数据,在那个方法里来控制数据展示的,那个是控制条数哪些的?
        残锿√篥?0
        2019/8/14 15:13:52
        能用了不
    回复
    潇洒走一回 0
    2018/12/26 9:40:11
    我也是林俊杰的歌迷
        ζ??不 ??羁 ???0
        2018/12/27 9:07:25
        幸会幸会
    回复
    OK 0
    2018/11/23 16:43:48
    Kiz ’jump 0
    2018/11/22 15:25:55
    哈哈哈林俊杰的粉丝嘛
        ζ??不 ??羁 ???0
        2018/11/23 8:34:24
        是呀是呀,从小听到大,可以说是信仰
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复