首页 > 手机js特效 > 前端框架 > 手机移动端拉刷新上拉加载的移动端原生js插件特效下载

手机移动端拉刷新上拉加载的移动端原生js插件特效下载

上一篇 下一篇
一个下拉刷新上拉加载的移动端原生js插件,不依赖任何额外的js库,需要自行设计下拉刷新上拉加载提示,以及loading的样式然后将dom实例传入插件即可
文件目录:

 
用法
 
html部分需要一个滚动容器,通常为一个div,必须设置容器的高度。并且容器需要一个可滚动的属性css设置overflow: scroll, 对于ios设备还需要-webkit-overflow-scrolling: touch否则ios设备下无法正常滚动。
<style>
         .container {
        height: 100vh;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }
</style>
 
<div class="container"> <!-- 滚动容器 -->
         ...
</div>
如果启用了下拉刷新(参数中设置了下拉刷新回调函数),则需要一个下拉刷新的loading 该laoding需要开发者根据自己项目要求自行设计。
 
<!-- 下拉刷新loading 定位在屏幕之外,下拉拖动时可以被拖动回屏幕 -->
<style>
         .pulldown {
        position: absolute;
        width: 100%;
        line-height: 50px;
        top: -50px;
        left: 0;
        z-index: 100;
        display: block;
    }
</style>
 
<div class="container">
         <p class="pullload pulldown"><img src="./images/loading.png" class="loading-ico" alt=""></p>
         ...
</div>
如果启用了上拉加载(参数中设置了上拉加载回调函数),则需要三个上拉加载的提示 该提示需要开发者根据自己项目要求自行设计。
 
<style>
         .pullload {
        display: none;
        text-align: center;
        font-size: 14px;
        color: #616161;
        margin-bottom: 10px;
    }
</style>
 
<div class="container">
         ...
         <p class="pullload pullup-before">上拉加载更多</p> <!-- 上拉加载前 -->
         <p class="pullload pullup-in"><img src="./images/loading.png" class="loading-ico" alt="">加载中...</p> <!-- 上拉加载中 -->
         <p class="pullload pullup-end">没有更多了</p> <!-- 所有数据加载完毕 -->
</div>
js部分下载pullloading.js或者pullloading.min.js在html中引用
<script src="your path/pullloading.min.js"></script>
实例化插件,并传入所需要的参数
 
var pullLoading = new PullLoading({
         scrollEle: document.querySelector('.container'), //下拉刷新容器dom实例
         refreshEl: document.querySelector('.pulldown'), //如果需要下拉刷新(必选)下拉刷新loading实例
         pullUpBefore: document.querySelector('.pullup-before'), //上拉加载未开始前的提示dom 需要自定义样式
    pullUpIn: document.querySelector('.pullup-in'), //上拉加载中loading 提示dom实例 需要自定义样式
    pullUpEnd: document.querySelector('.pullup-end'), //上拉加载完毕所有数据显示的提示dom实例 需要自定义样式
    pullUp: function(pl) { //上拉加载回调函数参数是插件实例本身
             ...
    },
    pullDown: function(pl) { //下拉刷新回调函数参数是插件实例本身
        ...
    }
});
方法 本插件有两个方法:pullLoading.stopPull()、 pullLoading.pullUpEnd(bool)。
.stopPull() 用于告诉插件回调里面的代码已执行完成上拉加载或下拉刷新完毕, 在ajax请求完成之后调
 
.pullUpEnd(bool) 用于设置上拉加载是否加载完所有数据,有一个参数。如果加载完所有数据则传true否则false.
 
注意在下拉刷新时仍然需要程序员判断是否加载完所有数据如果是则.pullUpEnd(true)否则.pullUpEnd(false)

模板简介:该模板名称为【手机移动端拉刷新上拉加载的移动端原生js插件特效下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【前端框架】栏目查找您需要的精美模板。

  • 下载密码 lanrenmb
  • 下载次数 13,570次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 11-26
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
  • 焦点图
  • 导航菜单
  • 悬浮漂浮
  • tab标签
  • 前端框架
  • 热门推荐 更多 >
    单页式简历模板 微信图片 html5 企业网站 微信模板 自适应 响应式 微信公众平台 微信文章 微信素材
    您可能会喜欢的其他模板