iScroll

最新推荐文章于 2023-02-14 14:29:53 发布
最新推荐文章于 2023-02-14 14:29:53 发布
阅读量1.2k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hjxgood/article/details/37932839
版权

<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- <meta http-equiv="Cache-Control" content="no-Cache"/> -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
<link type="text/css" rel="stylesheet" href="<@path file='/asset/common/css/list.css'/>"></link>
<link type="text/css" rel="stylesheet" href="<@path file='/asset/common/css/jquery.mobile-1.3.2.min.css'/>"></link>
 
<script type="text/javascript" src="<@path file='/asset/common/js/jquery-1.8.3.min.js'/>"></script>
<script type="text/javascript" src="<@path file='/asset/common/js/jquery.mobile-1.3.2.min.js' />"></script>
<script type="text/javascript" src="<@path file='/asset/common/js/pages/ws/iscroll.js' />"></script>
<script type="text/javascript" src="<@path file='/asset/common/js/pages/ws/list.js' />"></script>
 
<script type="text/javascript">
var getPubAccountHistoryMsgListUrl = "<@ajax code='com.zte.ixin.portal.business.BusinessCenter4Ws.ws__getPubAccountHistoryMsgList' />";
</script>

<style>
* {margin:0;padding:0;list-style-type:none;font-family:"微软雅黑",Helvetica, sans-serif;font-size:100%;}
body {background-color:#efeff4;}
a, area {blr:expression(this.onFocus=this.blur());text-decoration:none;color:#000;font-size:1em;}
a:focus {outline: none;}
.content_list, .content_body {display:block;width:97%; margin:auto;}
.content_list li {display:block;height:3em;border-top:1px solid #d9d9d9; height:64px; }
.content_list a {position:relative;display:block;height:44px; line-height:44px; color:#4d4d4d;}
.content_list img {float:right; top:0.5em; width:3em;height:3em;position:relative; overflow:hidden;}
.content_list_item {font-size:1em; height:4em;line-height:1.5em;padding-right:0.5em;color:#4d4d4d;display:table-cell;vertical-align:middle; text-align:justify;position:relative;}
.content_body {font-size:1em;line-height:1.5em;color:#4d4d4d;padding:0.5em;text-align:justify;}
.content_body a {color:#4d4d4d;}
.multi, .singel{width:97.5%; margin:auto; margin-top:0.5em; margin-bottom:0.5em;}
.i_xin_content {width:100%;border:1px solid #E4E4E4;border-radius:0.5em;overflow:hidden;background-color:#FFF;padding-bottom:0.5em;}
.content_head {width:97%;height:9em;padding-top:0.5em;margin:auto;position:relative;overflow:hidden;}
.content_head img {width:100%;}
.content_head_title {color:#FFF;padding:0.5em;width:100%;position:absolute;bottom:0px;background:#000;filter:alpha(opacity=75);-moz-opacity:0.75;-khtml-opacity:0.75;opacity:0.75;"}
</style>
</head>
<body>
    <input type="hidden" id="accountCode" name="accountCode" value="${p.accountCode!}">
 <div id="header">
 </div>
 <div id="wrapper">
  <div id="scroller">
   <div id="pullDown" class="idle">
    <span class="pullDownIcon"></span>
    <span class="pullDownLabel">Pull down to refresh...</span>
   </div>
   <ul id="thelist">
      
   </ul>
   <div id="pullUp" class="idle">
    <span class="pullUpIcon"></span>
    <span class="pullUpLabel">Pull up to refresh...</span>
   </div>
  </div>
 </div>
 <div id="footer"></div>
</body>
</html>

 

body,ul,li {
    padding:0;
    margin:0;
    border:0;
}

body {
    font-size:12px;
    /*chrome*/
    -webkit-user-select:none;
    -webkit-text-size-adjust:none;
    /*firefox*/
    -moz-user-select:none;
    -moz-text-size-adjust:none;
    /*opera*/
    -o-user-select:none;
    -o-text-size-adjust:none;
    font-family:helvetica;
}

#header {
    position:absolute; z-index:2;
    top:0; left:0;
    width:100%;
    height:45px;
    line-height:45px;
    background-color:#d51875;
    /*chrome*/
    background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
    /*ff*/
    background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
    /*opera*/
    background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
    padding:0;
    color:#eee;
    font-size:20px;
    text-align:center;
}

#header a {
    color:#f3f3f3;
    text-decoration:none;
    font-weight:bold;
    text-shadow:0 -1px 0 rgba(0,0,0,0.5);
}

#footer {
    position:absolute; z-index:2;
    bottom:0; left:0;
    width:100%;
    height:48px;
    background-color:#222;
    /*chrome*/
    background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
    /*ff*/
    background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
    /*opera*/
    background-image:-o-linear-gradient(top, #999, #666 2%, #222);
    padding:0;
    border-top:1px solid #444;
}

#wrapper {
    position:absolute; z-index:1;
    top:45px; bottom:48px;
    width:100%;
    background:#aaa;
    overflow:auto;
}

#scroller {
    position:absolute; z-index:1;
/*  -webkit-touch-callout:none;*/
    /*chrome*/
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    /*ff*/
    -moz-tap-highlight-color:rgba(0,0,0,0);
    /*opera*/
    -o-tap-highlight-color:rgba(0,0,0,0);
    width:100%;
    padding:0;
}

#scroller ul {
    list-style:none;
    padding:0;
    margin:0;
    width:100%;
    text-align:left;
}

#scroller li {
    padding:0 10px;
    height:40px;
    line-height:40px;
    border-bottom:1px solid #ccc;
    border-top:1px solid #fff;
    background-color:#fafafa;
    font-size:14px;
}

/**
 *
 * Pull down styles
 *
 */
#pullDown, #pullUp {
    background:#fff;
    height:40px;
    line-height:40px;
    padding:5px 10px;
    border-bottom:1px solid #ccc;
    font-weight:bold;
    font-size:14px;
    color:#888;
}
#pullDown .pullDownIcon, #pullUp .pullUpIcon  {
    display:block; float:left;
    width:40px; height:40px;
    background:url(images/pull-icon@2x.png) 0 0 no-repeat;
    background-size:40px 80px;
    /*chrome*/
    -webkit-background-size:40px 80px;
    -webkit-transition-property:-webkit-transform;
    -webkit-transition-duration:250ms;
    /*ff*/
    -moz-background-size:40px 80px;
    -moz-transition-property:-moz-transform;
    -moz-transition-duration:250ms;
    /*opera*/
    -o-background-size:40px 80px;
    -o-transition-property:-o-transform;
    -o-transition-duration:250ms;
}
#pullDown.idle .pullDownIcon {
    background-position:0 0;
    /*chrome*/
    -webkit-transform:rotate(0deg) translateZ(0);
    -webkit-animation-name:idle;
    -webkit-animation-duration:0;
    /*ff*/
    -moz-transform:rotate(0deg) translateZ(0);
    -moz-animation-name:idle;
    -moz-animation-duration:0;
    /*opera*/
    -o-transform:rotate(0deg) translateZ(0);
    -o-animation-name:idle;
    -o-animation-duration:0;
}
#pullUp.idle .pullUpIcon  {
    background-position:0 0;
    /*chrome*/
    -webkit-transform:rotate(-180deg) translateZ(0);
    /*ff*/
    -moz-transform:rotate(-180deg) translateZ(0);
    /*opera*/
    -o-transform:rotate(-180deg) translateZ(0);
}

#pullDown.flip .pullDownIcon {
    background-position:0 0;
    /*chrome*/
    -webkit-transform:rotate(-180deg) translateZ(0);
    -webkit-animation-name:idle;
    -webkit-animation-duration:0;
    /*ff*/
    -moz-transform:rotate(-180deg) translateZ(0);
    -moz-animation-name:idle;
    -moz-animation-duration:0;
    /*opera*/
    -o-transform:rotate(-180deg) translateZ(0);
    -o-animation-name:idle;
    -o-animation-duration:0;
}

#pullUp.flip .pullUpIcon {
    background-position:0 0;
    /*chrome*/
    -webkit-transform:rotate(0deg) translateZ(0);
    /*ff*/
    -moz-transform:rotate(0deg) translateZ(0);
    /*opera*/
    -o-transform:rotate(0deg) translateZ(0);
}

#pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {
    background-position:0 100%;
    /*chrome*/
    -webkit-transform:rotate(0deg) translateZ(0);
    -webkit-transition-duration:0ms;
    -webkit-animation-name:loading;
    -webkit-animation-duration:2s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    /*ff*/
    -moz-transform:rotate(0deg) translateZ(0);
    -moz-transition-duration:0ms;
    -moz-animation-name:loading;
    -moz-animation-duration:2s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-timing-function:linear;
    /*opera*/
    -o-transform:rotate(0deg) translateZ(0);
    -o-transition-duration:0ms;
    -o-animation-name:loading;
    -o-animation-duration:2s;
    -o-animation-iteration-count:infinite;
    -o-animation-timing-function:linear;
}

/*chrome*/
@-webkit-keyframes loading {
    from { -webkit-transform:rotate(0deg) translateZ(0); }
    to { -webkit-transform:rotate(360deg) translateZ(0); }
}
@-webkit-keyframes idle {
    from { -webkit-transform:rotate(0deg) translateZ(0); }
    to { -webkit-transform:rotate(0deg) translateZ(0); }
}
/*ff*/
@-moz-keyframes loading {
    from { -moz-transform:rotate(0deg) translateZ(0); }
    to { -moz-transform:rotate(360deg) translateZ(0); }
}
@-moz-keyframes idle {
    from { -moz-transform:rotate(0deg) translateZ(0); }
    to { -moz-transform:rotate(0deg) translateZ(0); }
}
/*opera*/
@-o-keyframes loading {
    from { -o-transform:rotate(0deg) translateZ(0); }
    to { -o-transform:rotate(360deg) translateZ(0); }
}
@-o-keyframes idle {
    from { -o-transform:rotate(0deg) translateZ(0); }
    to { -o-transform:rotate(0deg) translateZ(0); }
}

 

 

 

 var accountCode = "";
   
    var OFFSET = 10;
    var page = 1;
    var PAGESIZE = 10;
   
    var myScroll,
     pullDownEl, pullDownOffset,
     pullUpEl, pullUpOffset,
     generatedCount = 0;
     var maxScrollY = 0;
   
    var hasMoreData = false;

  //  window.addEventListener("load",loaded,false);
   
    document.addEventListener('touchmove', function(e) {
  e.preventDefault();
 }, false);
 
 document.addEventListener('DOMContentLoaded', function() {
  $(document).ready(function() {
   loaded();
  });
  //setTimeout(loaded, 200);
 }, false);
   
    function loaded() {
     pullDownEl = document.getElementById('pullDown');
     pullDownOffset = pullDownEl.offsetHeight;
     pullUpEl = document.getElementById('pullUp');
     pullUpOffset = pullUpEl.offsetHeight;
   
     hasMoreData = false;
     $("#pullUp").hide();
   
     pullDownEl.className = 'loading';
     pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
   
     page = 1;
     accountCode = $("#accountCode").val();
        params = {"accountCode": accountCode, "pageIndex":page, "pageSize":PAGESIZE};

        $.ajax({
            type : "POST",
            dataType : "json",
            url : getPubAccountHistoryMsgListUrl,
            data : params,
            success : function(data) {
                 if (data.result == "success") {
                     $("#thelist").show();
                     if (data.rtnMap.dailyIncome.rowsCount< PAGESIZE) {
                         hasMoreData = false;
                         $("#pullUp").hide();
                     } else {
                         hasMoreData = true;
                         $("#pullUp").show();
                     }
    
                     myScroll = new iScroll('wrapper', {
                         useTransition: true,
                         topOffset: pullDownOffset,
                         onRefresh: function() {
                             if (pullDownEl.className.match('loading')) {
                                 pullDownEl.className = 'idle';
                                 pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
                                 this.minScrollY = -pullDownOffset;
                             }
                             else if (pullUpEl.className.match('loading')) {
                                 pullUpEl.className = 'idle';
                                 pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
                             }
                         },
                         onScrollMove: function() {
                             if (this.y > OFFSET && !pullDownEl.className.match('flip')) {
                                 pullDownEl.className = 'flip';
                                 pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
                                 this.minScrollY = 0;
                             } else if (this.y < OFFSET && pullDownEl.className.match('flip')) {
                                 pullDownEl.className = 'idle';
                                 pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
                                 this.minScrollY = -pullDownOffset;
                             }
                             if (this.y < (maxScrollY - pullUpOffset - OFFSET) && !pullUpEl.className.match('flip')) {
                                 if (hasMoreData) {
                                     this.maxScrollY = this.maxScrollY - pullUpOffset;
                                     pullUpEl.className = 'flip';
                                     pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';
                                 }
                             } else if (this.y > (maxScrollY - pullUpOffset - OFFSET) && pullUpEl.className.match('flip')) {
                                 if (hasMoreData) {
                                     this.maxScrollY = maxScrollY;
                                     pullUpEl.className = 'idle';
                                     pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
                                 }
                             }
                         },
                         onScrollEnd: function() {
                             if (pullDownEl.className.match('flip')) {
                                 pullDownEl.className = 'loading';
                                 pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
                                 page=1;
                                 getPageData(page);
                             }
                             else  if (hasMoreData && pullUpEl.className.match('flip')) {
                                 pullUpEl.className = 'loading';
                                 pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';
                                 page++;
                                 getPageData(page);
                             }
                         }
                     });
    
                   
    
                     $("#thelist").empty();
                     fillPageData(data.rtnMap.dailyIncome.items);
                 }
           }
   });
  }
 
  
    function getPageData(page)
    {
        $.ajax({
            type : "POST",
            dataType : "json",
            url : getPubAccountHistoryMsgListUrl,
            data : {"accountCode": accountCode, "pageIndex":page, "pageSize":PAGESIZE},
            success : function(data) {
                if (data.result == "success") {
                    if (page==1) {
                        $("#thelist").empty();
                    }
                   
                    if (data.rtnMap.dailyIncome.rowsCount< PAGESIZE) {
                        hasMoreData = false;
                        $("#pullUp").hide();
                    } else {
                        hasMoreData = true;
                        $("#pullUp").show();
                    }
                    fillPageData(data.rtnMap.dailyIncome.items);
                }
            }
        });
    }
   
   
    function fillPageData(items)
    {
        for (var i = 0; i < items.length; i++) {
            //4:图文消息
            if(items[i].type==4){
               $("#thelist").append(items[i].content);
            }
            //3:语音
            else if(items[i].type==3){
               $("#thelist").append('<li>' + "【语音消息】" + '</li>');
            }
            //2:图片消息
            else if(items[i].type==2){
               $("#thelist").append('<li class=\"i_xin_content\">' +"<img src='"+items[i].content+"' />" + '</li>');
            }
            //1:文本消息
            else{
               $("#thelist").append('<li>' + items[i].content + '</li>');
            }
        }
        myScroll.refresh();

        if (hasMoreData) {
            myScroll.maxScrollY = myScroll.maxScrollY + pullUpOffset;
        } else {
            myScroll.maxScrollY = myScroll.maxScrollY;
        }
        maxScrollY = myScroll.maxScrollY;
    }

 

hjxgood
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue中使用iscroll（详细步骤）
darabiuz的博客
10-28 2606
1.下载iscroll 下载地址：iscroll-probe.js 2.封装组件 在vue里面使用iscroll需要封装一个iscroll滚动组价 创建ScollView.vue 目录结构如下图： 导入iscroll <template>结构采用iscroll官网推荐的的三层解构 <template> <!-- ref用以获取wrapper的dom元素 --> <div id="wrapper" ref='wrapper'>
iScroll.zip
09-16
iScroll 是一个高性能的JavaScript滚动库，主要用于解决前端开发中网页滚动流畅性的问题，尤其是在处理大量数据或元素时。在移动设备和触摸屏环境中，iScroll 提供了平滑的滚动体验，支持横向和纵向滚动，同时兼容...
iScroll滚动插件
weixin_42139212的博客
02-15 848
/* 1.什么是iScroll? iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。 iScroll不仅仅是滚动。在你的项目中包含仅仅4kb大小的iScroll，能让你的项目便拥有滚动，缩放，平移，无限滚动，视差滚动，旋转功能 2.iScroll基本使用 2.1按照iScroll的规定搭建HTML结构 2...
前端必备自定义滚动库——iScroll
热门推荐
weixin_34102807的博客
05-21 1万+
作者真的很懒，这篇文章从想法开始到现在都几个月了。
转：天生我才很有用——iscroll的那些事
一路追寻的专栏
11-04 236
iscroll是什么？ iscroll.js是Matteo Spinelli开发的一个js文件，使用原生js编写，不依赖与任何js框架。旨在解决移动webkit系浏览器的区域滚动问题，兼容mobile safari、android默认浏览器、safari、chrome、firefox5+、opera11+、IE9+及其他webkit核心浏览器。最新版本为iscroll4。 iscr...
关于iscroll以及根据iscroll实现下拉刷新、下拉加载更多效果
weixin_44937913的博客
11-12 921
一、关于iscroll 1、安装iscroll ：npm install iscroll@5.2.0 ！important： 首先注意iscroll内每一个滚动元素都需要设定高度，不能设定滚动元素的宽度使高度自适应，否则iscroll会无法滚动到底部，底部总有一部分无法显示。 其次注意iscroll要滚动，容器的高度必须要小于内容的高度，在引入iscroll滚动组件时，父组件必须在iscroll滚动组件外套一层容器，我一般是使用div内嵌套scroll...
html iscroll demo.rar
01-04
3. **初始化iscroll**：在JavaScript中，使用`new IScroll`来创建一个iscroll实例。你需要传入两个参数，第一个是滚动容器的选择器，第二个是一个配置对象，可以设置滚动方向、是否启用鼠标滚轮等选项。 ```...
iscroll4
01-11
**iscroll4** 是一个轻量级的JavaScript库，由Matteo Spinelli开发，用于在Web页面上实现平滑的滚动效果。iscroll主要用于处理触摸设备和鼠标滚轮事件，提供高性能的滚动功能，特别是在移动端，它可以替代浏览器原生...
基于iScroll实现内容滚动效果
08-27
基于iScroll实现内容滚动效果是一种常见的技术，特别是在开发Web App时，为了实现类似原生应用的流畅滚动体验。iScroll是一款强大的JavaScript滚动插件，它能够提供诸如滚动、缩放、拉动刷新和自定义滚动条等多种...
iscroll demo
09-09
**iscroll 演示项目详解** iscroll 是一个轻量级、高性能的JavaScript滚动库，主要用于处理触摸设备上的滚动事件。它能够提供平滑、流畅的滚动效果，尤其在移动浏览器上表现卓越。iscroll 支持多种滚动场景，如滚动...
iscroll5.2.0文件下载
12-08
IScroll是一个类，每个需要使用滚动功能的区域均要进行初始化。每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的。 尽可能保持DOM结构的简洁。iScroll使用硬件合成层但是有一个限制硬件可以处理的元素。
iscroll.js
04-01
iscroll.js
iscroll.js下载 5.2.0最新版本
07-13
iscroll.js 最新版本 欢迎下载使用
iScroll框架的使用和修改
kaosini的专栏
03-17 1673
iScroll 的诞生是因为手机 Webkit 浏览器（iPhone、iPod、Android 和 Pre）本身没有为固定宽度和高度的元素提供滚动内容的方法。这导致了很多网页使用 position:absolute 无法固定页头页尾，并对内容进行滚动的方式。而 iScroll 就是为了解决这个问题。 iscroll使用注意事项： 1, .scroll不要在css里设置高度,不然拖不动2
IScroll的使用（在vue中）
snow_small的博客
02-20 1万+
1、下载iscroll 2、在需要用到的组件中引入：要用-probe才有onscroll事件 import iScroll from '../../static/js/iscroll-probe.js' 3、使用 （1）html元素 &lt;div class="goods-mume"&gt; &lt;ul&gt; &lt;li class="mume-item border-...
iscroll的简单使用
bo_gu的博客
02-14 703
iOS自带的拖动总是被测试小姐姐挑出bug，所以我们公司用的模板禁用了iOS原生的滚动拖拽功能，h5项目哈。找到你需要滚动的容器，这里强调一下，必须是三层包裹的结构，两层的会有bug。最外层的div命名容器，ul才是可以滚动的，ul里面正常放需要的内容。在读到数据，显示出容器之后，需要刷新一下iscroll，例如。那有滚动拖拽需求的时候 就需要用到iscroll了。iscroll的简单调用就是这样啦，记录 一下。然后在js里先初始化iscroll。
iscroll
keep789的博客
09-10 499
iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。一般用来做 例如：上拉加载、下拉刷新. IScroll是一个类，每个需要使用滚动功能的区域均要进行初始化。每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的。 官网http://iscrolljs.com，GitHub地址https://github.com/cubiq/iscr...
iscroll中文官网
最新发布
07-28
很抱歉，我无法提供iscroll中文官网的引用内容。但是你可以通过搜索引擎来找到iscroll的中文官网。 #### 引用[.reference_title] - *1* *3* [iscroll中文文档]...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值