基于iscroll.js和Vue.js 的上拉加载功能实现

所属分类:UI-加载

 38509  313  查看评论 (9)
分享到微信朋友圈
X
基于iscroll.js和Vue.js 的上拉加载功能实现 ie兼容10

根据iscroll 官方文档内容编写:

首先在 window.onload 时 new 一个 iScroll

第二步 设置 iscroll的参数   (写在一堆了 ,  也可以在下面使用 myscroll.onScrollMove = function 来设置)

第三步 使用is_r 控制是否发送请求

vue部分

static 是来控制 状态标示的显示的  0表示 上拉   1表示 加载中  2表示 加载成功

如果没有特殊需要,只需在onScrollMove方法里, for循环处和下面部分包裹在ajax请求的success里即可

实现方法有点low, 希望与遇到同样问题的猿们共勉!

相关插件-加载

HTML5手机端手指滑动上拉加载

jQuery HTML5手机端手指滑动上拉加载代码是一款通过jquery实现tab切换和上拉加载更多的效果,适用于手机端页面开发。
  加载
 55660  585

jQuery顶部加载动画插件loadBar.js

loadBar是一个轻量级的(最小2KB)jQuery插件,当加载内容时,页面顶部显示一个漂亮的动画条。
  加载
 29920  364

js环形进度条

js环形进度条,再也不怕js了
  加载
 66103  531

jQuery 圆型进度条

jQuery canva圆型进度条,可通参数快速修改进度条
  加载
 35710  339

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

    小智智ing 0
    2019/10/11 15:01:41
    为什么初始化数据的的时候,不能滚动 加载一次之后才可以滚动 回复
    花儿为何那样红 0
    2018/10/27 11:14:21
    使用异步加载数据,就不能滚动了,怎么解决呢? 回复
    愿得一人心 0
    2018/8/30 17:36:11
    用的哪个版本的iscroll呢 回复
    贝加尔 0
    2017/8/26 18:55:59

    能在同个页面多次引用么

        金三瘦0
        2017/9/1 10:40:35

        每个 iscroll 对象只能在一个div里面使用吧,  可以多new 几个 iscroll对象

    回复
    web unbroken 0
    2017/7/2 18:46:53
    按住鼠标不放超出类容区域后松开鼠标,再把鼠标移入内容区域,列表也会跟着鼠标一起滚动
        金三瘦0
        2017/7/3 16:47:03

        我试了下没有遇到这种情况哦  会不会是浏览器或者鼠标的问题

        web unbroken0
        2017/7/3 21:28:19

        有可能,现在没有那个问题了

        小小0
        2017/7/17 18:06:49

        有呢

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复