iscroll-probe实现下拉刷新和下拉加载效果


Posted in Javascript onJune 28, 2017

需要注意的是外部wrapper的高度,以及all的高度,须是>100%。

附加一个css3 的loading

.dengl-spinner {
  width: 0.682rem;
  height: 0.682rem;
  position: relative;
  position: absolute;
  z-index: -1;
  left: 50%;
  margin-left: -0.341rem;
  top: 2.5rem;
}
.dengl-spinner1{
  width: 0.682rem;
  height: 0.682rem;
  position: relative;
  position: fixed;
  z-index: -1;
  left: 50%;
  margin-left: -0.341rem;
  bottom: 1.5rem;
}
.dengl-cube1, .dengl-cube2 {
  background-color: #f2513f;
  width: 0.682rem;
  height: 0.682rem;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: cubemove 1.8s infinite ease-in-out;
  animation: cubemove 1.8s infinite ease-in-out;
}

.dengl-cube2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

@-webkit-keyframes cubemove {
  25% {
    -webkit-transform: translateX(1rem) rotate(-90deg) scale(0.5)
  }
  50% {
    -webkit-transform: translateX(1rem) translateY(1rem) rotate(-180deg)
  }
  75% {
    -webkit-transform: translateX(0px) translateY(1rem) rotate(-270deg) scale(0.5)
  }
  100% {
    -webkit-transform: rotate(-360deg)
  }
}

@keyframes cubemove {
  25% {
    transform: translateX(1rem) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(1rem) rotate(-90deg) scale(0.5);
  }
  50% {
    transform: translateX(1rem) translateY(1rem) rotate(-179deg);
    -webkit-transform: translateX(1rem) translateY(1rem) rotate(-179deg);
  }
  50.1% {
    transform: translateX(1rem) translateY(1rem) rotate(-180deg);
    -webkit-transform: translateX(1rem) translateY(1rem) rotate(-180deg);
  }
  75% {
    transform: translateX(0px) translateY(1rem) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(1rem) rotate(-270deg) scale(0.5);
  }
  100% {
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}

上下两个

<div class="dengl-spinner" style="top:17rem">
  <div class="dengl-cube1"></div>
  <div class="dengl-cube2"></div>
</div>

<div class="dengl-spinner1" style="bottom:3rem;">
  <div class="dengl-cube1"></div>
  <div class="dengl-cube2"></div>
</div>

下面是正文

<style>
    #wrapper {
      position: absolute;
      width: 100%;
      z-index: 1;
      top: 16.1rem;
      bottom: 2rem;
      left: 0;
      overflow: hidden;
    }

    #all {
      position: absolute;
      z-index: 1;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      width: 100%;
      -webkit-transform: translateZ(0);
      -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -o-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-text-size-adjust: none;
      -moz-text-size-adjust: none;
      -ms-text-size-adjust: none;
      -o-text-size-adjust: none;
      text-size-adjust: none;
      background: #fff;
      min-height: 100.5%;
    }
  </style>
<div id="wrapper">
            <ul id="all"></ul>
  </div>
var index = 2, size = 10;
    $(function () {
      $.qr.ajax('UserCenter/myJdAndMl', { token: $.qr.gettoken() }, function (d) {
        var vm1 = new Vue({
          el: '#top_1',
          data: {
            money: d.data_single.money
          }
        });
        var vm2 = new Vue({
          el: '#top_2',
          data: {
            earnings: d.data_single.earnings,
            has_catfood: d.data_single.has_catfood,
            not_catfood: d.data_single.not_catfood
          }
        });
      });
      var myScroll = new IScroll('#wrapper', {
        mouseWheel: false,
        bounceTime: 1000,
        bounceLock: true,
        probeType: 3
      });
      var handle = 0;
      myScroll.on('scroll', function () {
        if (this.y > 50) {
          handle = 1;
        } else if (this.y < (this.maxScrollY - 50)) {
          handle = 2;

        };
      });
      myScroll.on('scrollEnd', function () {
        if (handle == 2) {
          add(index, size);
        } else if (handle == 1) {
          add(1, size);
        }
        handle = 0;
        myScroll.refresh();
      });
      document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
      add(1, size);
    });
    function add(pindex, psize) {
      $.qr.ajax('UserCenter/maoliangRecordList',
        { token: $.qr.gettoken(), pagesize: psize, pageindex: pindex }, function (d) {
          var _h = '';
          if (pindex != 1 && d.data_list.data_list.length > 0) index++;
          if (d.data_list.data_list.length == 0) return false; 
          $(d.data_list.data_list).each(function (i, j) {
            _h += '<li>';
            _h += '<div class="info" style="left: 10%">' + j.name + '</div>';
            _h += '<div class="info">' + j.num + '</div>';
            _h += '<div class="info">' + j.time + '</div>';
            _h += '</li>';
          });
          if (pindex == 1) $('#all').empty();
          $('#all').append(_h);

        }, false);

    }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript动态调整iframe高度的方法
Mar 06 Javascript
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
Jan 23 Javascript
javascript变量作用域使用中常见错误总结
Mar 26 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
Javascript之Number对象介绍
Jun 07 Javascript
js enter键激发事件实例代码
Aug 17 Javascript
如何解决hover在ie6中的兼容性问题
Dec 15 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
webpack3.0升级4.0的方法步骤
Apr 02 Javascript
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
JavaScript 获取元素在父节点中的下标(推荐)
Jun 28 #Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 #Javascript
js+html制作简单日历的方法
Jun 27 #Javascript
ionic环境配置及问题详解
Jun 27 #Javascript
微信小程序 密码输入(源码下载)
Jun 27 #Javascript
Javascript实现base64的加密解密方法示例
Jun 27 #Javascript
微信小程序 空白页重定向解决办法
Jun 27 #Javascript
You might like
深入解读php中关于抽象(abstract)类和抽象方法的问题分析
2014/01/03 PHP
php计算两个日期时间差(返回年、月、日)
2014/06/19 PHP
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
php基于环形链表解决约瑟夫环问题示例
2017/11/07 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
使用IE6看老赵的博客 jQuery初探
2010/01/17 Javascript
JSQL SQLProxy 的 php 版本代码
2010/05/05 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
javascript定时保存表单数据的代码
2011/03/17 Javascript
uploadify 3.0 详细使用说明
2012/06/18 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
利用jquery操作Radio方法小结
2014/10/20 Javascript
jQuery实现简单下拉导航效果
2015/09/07 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
js和jQuery设置Opacity半透明 兼容IE6
2016/05/24 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
2017/01/05 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
解析Vue.js中的组件
2018/02/02 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
[03:09]2014DOTA2国际邀请赛 赛场上的美丽风景线 中国Coser也爱DOTA2
2014/07/20 DOTA
Python文件路径名的操作方法
2019/10/30 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
Selenium执行完毕未关闭chromedriver/geckodriver进程的解决办法(java版+python版)
2020/12/07 Python
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
爱国卫生月实施方案
2014/02/21 职场文书
综治工作心得体会
2014/09/11 职场文书
三八节活动主持词
2015/07/04 职场文书
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技