博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
基于iScroll 的开发(不断补充)
阅读量:6411 次
发布时间:2019-06-23

本文共 886 字,大约阅读时间需要 2 分钟。

iScroll是一个JS插件,支持鼠标和触摸的滑动、滚动操作,可用于实现列表(横、纵、矩阵)、图片幻灯式播放等效果。

本文结合实例,解析iScroll的使用方法以及注意事项。

说明:本文使用的版本是iScroll4   (更新的版本见 )

 

基本概念

使用iscroll一般需要构造如下结构:

<div class="wrapper">

    <div class="scroller">
        <ul>
            <li></li>
              ......
            <li></li>
        </ul>
    </div>
</div>

最外层是wrapper,用于实例化iScroll的div。

wrapper里面是一个scroller,scroller的宽高与wrapper的宽高共同决定着列表有多少行多少列。例如:

.wrapper {

    width:100px;
    height:100px;
}

.scroller {

    width:300px;
    height:200px;
}

则列表会有2行,3列,横向可以滚3屏,纵向可以滚2屏。

 

从上图中可以看出,wrapper之于scroller,就像viewport之于document.

wrapper的宽高好说,你想让它多大就设置多大。

对于scroller,当元素个数不确定的时候,宽高是要计算出来。

 

动态计算scroller宽高

为演示如何动态计算宽高,我写了一个JQueryUI Widget,并且配了一个demo。(代码下载:)

这个widget做的事情就是绘制一个横向滑动或纵向滑动的iscroll,插件使用者只需指定wrapper(也就是可见区域)的宽高,scroller的宽高会自动计算出来。

由于iscroll本身是用float:left来排列元素,因此在绘制横向滑动的iscroll时要调换一下各元素的位置,这些算法在插件的代码中都有体现。

以下截图展示了横向纵向两种iscroll的样子,以及向尾部添加元素后的状态。

 

      

 

转载于:https://www.cnblogs.com/dc10101/archive/2012/07/24/2607276.html

你可能感兴趣的文章
开源 免费 java CMS - FreeCMS1.5-建站向导
查看>>
Selenium的延迟等待
查看>>
jquery 1.6以上版本 全选
查看>>
AppCan 学习
查看>>
flask框架
查看>>
《疯狂Java讲义》学习笔记(十)异常处理
查看>>
Lua(Codea) 中 table.insert 越界错误原因分析
查看>>
ELK 5.x日志分析 (二) Elasticserach 5.2 安装
查看>>
一次奇怪的AP注册异常问题处理
查看>>
TableStore: 海量结构化数据分层存储方案
查看>>
Unity 4.x游戏开发技巧集锦(内部资料)
查看>>
自适应网页设计
查看>>
获取BT节点信息bittorrent-discovery
查看>>
Centos 7使用vsftpd搭建FTP服务器
查看>>
linux下SVN不允许空白日志提交
查看>>
第2周第1课
查看>>
山寨c 标准库中的getline 函数
查看>>
shell时间
查看>>
pfSense book之2.4安装指南
查看>>
org.springframework.data.redis 一次连接获取特定key所有k-v(pipeline)
查看>>