移动端滚动翻页

<!DOCTYPE html>
<html ng-app="plunker">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <title>FrozenUI Demo</title>
        <link rel="stylesheet" href="css/frozen.css">
        <script type="text/javascript" src="js/angular.min.js"></script>
        <script>

            var app = angular.module(‘plunker‘, []);

            app.controller("slideController",function(){   

                var i=0;             

                window.onscroll = function(e){//滚动事件

                    var oScrollTop=document.body.scrollTop;//滚动条距离页面顶部高度(滚动了多少高度)
                    var oWindowHeight=document.documentElement.clientHeight;//可视区高度
                    var oDocumentHeight=document.documentElement.offsetHeight;//当前元素高度

                     // console.log(angular.element(document.documentElement.scrollTop));//火狐下获取滚动高度                    

                    if(oScrollTop==oDocumentHeight-oWindowHeight){//判断条件---滚动条距离页面顶部高度等于当前元素高度减去可视区高度
                        //业务逻辑
                        i++;
                        console.log(e);
                         console.log(angular.element(document.body.scrollTop));//chrome下获取滚动高度
                        angular.element(document.querySelector("p")).wrap( "<div class=‘new‘>11111111111</div>" );                        

                    }
                };

            })

        </script>
    </head>
    <body ng-controller="slideController">
        <p style="height:1000px">p</p>
        <!-- <p id="id1">id</p>
        <p class="class1">class</p> -->
    </body>
</html>

  

时间: 2024-10-08 20:05:28

移动端滚动翻页的相关文章

★android开发--ListView+Json+异步网络图片加载+滚动翻页的例子(图片能缓存,图片不错乱)

例子中用于解析Json的Gson请自己Google下载 主Activity: package COM.Example.Main; import java.util.HashMap; import java.util.Iterator; import java.util.LinkedList; import java.util.List; import java.util.Map; import COM.Example.Main.R; import COM.Example.Main.stringG

实现类似微信表情包横向滚动翻页的功能,运用UICollectionView,自定义UICollectionViewFlowLayout,cell左右排版 ,支持多组Cell实现。

结合:https://blog.csdn.net/qiuhaozhou/article/details/54582741 下面是我所要的样式的实现的代码: .h文件如下: #import <UIKit/UIKit.h> @interface JYECircleFlowLayout : UICollectionViewFlowLayout //  一行中 cell 的个数 @property (nonatomic,assign) NSUInteger itemCountPerRow; //   

WPF解决当ScrollViewer中嵌套ItemsControl时,不能使用鼠标来滚动翻页

1. ScrollViewer:滚动条容器,当内容超过指定的长度和宽度后,就会出现滚动条,而且可以使用鼠标中键来滚动, 简单例子如下: 1 <Window x:Class="ConnectScrollViewScrollingDemo.MainWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.mic

XtraGrid滚轮翻页

滚轮翻页与传动的翻页更为方便,经过本人一番探讨与琢磨终于在XtraGrid的GridView中实现了鼠标滚轮翻页. 我新建了一个组件继承原本的GridControl,在组件中添加了一个ImageList,专门存放一些资源图片.用于实现动态图的效果. 添加一个自定义委托的参数与枚举,委托参数用于传递分页的信息.     public class PagingEventArgs : EventArgs     {        public int PageSize { get; set; }   

图片延迟加载和滑动翻页

一:预加载 首先,我们需要引用JS, <script src="/Scripts/JQuery.LazyLoad.js"></script> 其次,修改img的格式为: <img data-original="/images/img01.png" src="/images/grey.gif"><span>收藏</span></a> 注意,data-original中的path

前嗅ForeSpider教程:采集表格/列表页中的数据(翻页)

以孔夫子旧书网的最近出版板块为例(http://www.kongfz.com/1004/)为例,采集列表页的所有数据:第一步:新建任务①击左上角"加号"新建任务,如图1: ②在弹窗里填写采集地址,任务名称如图2:③点击下一步,选择进行数据抽取还是链接抽取,本次采集需要采集当前板块的列表页所有内容,所以只需要在同一个模板中进行翻页链接抽取以及数据抽取即可.此处需要勾选"抽取链接"-"普通翻页"以及"抽取数据",如图3: 第二步:

移动端翻页插件dropload.js(支持Zepto和jQuery)

一. 声明 代码来源:github上的dropload项目. 二. 问题 dropload.js提供了最基本的上拉翻页,下拉刷新功能.对于由服务端一次返回所有数据的情况基本通用. 但是,需求往往不是服务端一次性返回所有数据,往往还要支持服务端分页,搜索,排序,多条件筛选等功能.(比较类似美团美食的界面) 三. 解决方案. 改进1:由于有分页,搜索,排序,多条件筛选功能,可能都不需要上拉,进到页面就没有数据. 例如:搜索一个服务端不存在的名字. 所以,添加接口设置setHasData. MyDro

flex布局构建大屏框架并支持翻页动画、滚动表格功能

本文将利用flex属性构建大屏可视化界面.界面主要分标题栏.工具栏.数据可视化窗口.其中,翻页动画以及滚动表格功能分别分布在数据可视化界面两侧. 鼠标点击标题,可看到左侧窗口翻转动画: 整体布局效果图: 滚动列表效果图及核心代码: var myH = $(".tableBoy").height() + 10;//获取容器高度 确定可视区域 $(".tableBoy").css({ 'height': myH + "px", "overf

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件.iScroll不仅仅是 滚动.它可以处理任何需要与用户进行移动交互的元素.在你的项目中包含仅仅4kb大小的iScroll,你的项目便拥有了滚动,缩放,平移,无限滚动,视差滚动,旋转功能.iScroll的强大毋庸置疑,本人也非常欢迎大家使用iScr