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 相关文章推荐
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
Jan 11 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
Oct 17 Javascript
thinkphp 表名 大小写 窍门
Feb 01 Javascript
JavaScript中常用的六种互动方法示例
Mar 13 Javascript
javascript设计模式之单体模式学习笔记
Feb 15 Javascript
基于angular实现三级联动的生日插件
May 12 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
详解Angular cli配置过程记录
Nov 07 Javascript
js如何验证密码强度
Mar 18 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 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将向Java靠拢
2006/10/09 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
php中文验证码实现方法
2015/06/18 PHP
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
Symfony控制层深入详解
2016/03/17 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
js获取客户端外网ip的简单实例
2013/11/21 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
Python操作SQLite简明教程
2014/07/10 Python
Python while 循环使用的简单实例
2016/06/08 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
python斐波那契数列的计算方法
2018/09/27 Python
python字典一键多值实例代码分享
2019/06/14 Python
Python字符串对象实现原理详解
2019/07/01 Python
python3.x提取中文的正则表达式示例代码
2019/07/23 Python
Python 剪绳子的多种思路实现(动态规划和贪心)
2020/02/24 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
综合素质的自我鉴定
2013/10/07 职场文书
四年大学自我鉴定
2014/02/17 职场文书
优秀实习生感言
2014/03/01 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
领导干部作风建设总结
2014/10/23 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
导游词之天下银坑景区
2019/11/21 职场文书
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python