位置: 编程技术 - 正文

学习使用jquery iScroll.js移动端滚动条插件(使用jquery实现的项目)

编辑:rootadmin

推荐整理分享学习使用jquery iScroll.js移动端滚动条插件(使用jquery实现的项目),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery用法,使用jquery实现的项目,使用jquery实现的项目,熟练使用jquery,熟练使用jquery,jquery使用教程,使用jquery的步骤,jquery使用教程,内容如对您有帮助,希望把文章链接给更多的朋友!

大家在日常工作中最常用的插件是什么,jQurey?Lazyload?但是这些都是在PC端,但是在移动端最常用的插件莫过于iScroll了,iScroll到底是什么东西,应该怎么用?iScroll是个很强大的插件,我也只是略懂皮毛,这里我们简单的介绍一下。iScroll的产生:

iScroll的产生完全是因为移动版webkit浏览器,例如在iPhone,Android 的移动设备上。iScroll的使用方法:

iScroll的原理是外层有一个溢出隐藏(overflow:hidden;)的DOM,然后这个区域内的第一个DOM结构会被实例化,其包裹的内容可以纵向或者横向的滚动,所以在使用iScroll的时候,滚动元素要尽量的简单,减少DOM个数,减少嵌套,因为DOM结构越是复杂iScroll运行起来就越是吃力,有可能会造成某些节点显示不正常的情况。 所以,推荐使用的DOM结构如下:

注意:再次重申,只有wrapper里的第一个子元素(ul)才可以被实例化滚动,并且要结合外层的DOM(wrapper)才能实现滚动。如果 wrapper中有多个ul怎么办?很简单,记住那句话,只有wrapper里的第一个子元素(ul)才可以被实例化滚动:

学习使用jquery iScroll.js移动端滚动条插件(使用jquery实现的项目)

看到了吧,只有first会被实例化。 注意:这里第一个DOM结构的ID(first)可以不写,我只是为了方便大家识别才写了个ID,但是最外层的ID(wrapper)一定要写,因为在JS实例化的时候需要填写这个ID:

iScroll应该如何实例化:

既然说道了实例化,我们应该在什么时候实例化?据说实例化的方法有很多,但是我没用过,我只说一种:(1)在HTML(uw3c.html)页面底部(body之后html之前)加载iscroll.js与当前页面的uw3c.js,这样能确保HTML的DOM结构能加载出来。(2)在JS插入页面DOM结构和数据之前实例化iScroll,也就是在JS的最开始实例化,因为之后可能会使用JS来插入DOM或者数据,这样以来能确保在插入数据之前iScroll已经实例化了。

y, time, relative)方法:传入4个参数:X轴滚动距离,Y轴滚动距离,效果时间,是否相对当前位置。所以例如:

(2)refresh()方法:在DOM结构发生改变之后,需要刷新iScroll,否则滚动插件会实例化的不准确:

(3)onPosChange,有没有一个方法能返回位置的变化?你可以查询一下自己所用的iScroll中有没有onPosChange方法:

(4)onScrollEnd:滚动结束时执行的事件,如果想在滚动结束时出发摸个事件,这个方法就拍上用处了:

(5)onRefresh:在DOM结构发生改变之后,需要刷新iScroll,否则滚动插件会实例化的不准确,onRefresh是刷新完iScroll会执行的方法。(6)onBeforeScrollStart:开始滚动前的时间回调,默认是阻止浏览器默认行为 。(7)onScrollStart:开始滚动的回调。(8)onBeforeScrollMove:在内容移动前的回调。(9)onScrollMove:内容移动的回调。()onBeforeScrollEnd:在滚动结束前的回调。()onTouchEnd:手离开屏幕后的回调。()onDestroy:销毁实例的回调。

标签: 使用jquery实现的项目

本文链接地址:https://www.jiuchutong.com/biancheng/383020.html 转载请保留说明!

上一篇:jQuery iScroll.js 移动端滚动条美化插件第1/5页

下一篇:jQuery实现控制文字内容溢出用省略号(…)表示的方法(jquery控制台输出)

  • 进口报关商品的完税价格包含运费吗
  • 待认证进项税额和待抵扣进项税额的区别
  • 纳税怎么理解
  • 税收滞纳金调增填哪张表
  • 个人所得税退的多好还是少好
  • 生育津贴到公司账上怎么发给员工
  • 金融商品转让和持有至到期都需要缴纳增值税吗
  • 成本结转的方法能用百分比法吗
  • 网上报税超过了时间还能报吗
  • 一笔多少钱
  • 职工教育经费税法
  • 什么情况下增值税进项税额要转出
  • 应计入企业存货成本有哪些
  • 预缴增值税销售额
  • 收到施工方给红包怎样处理
  • 以旧换新的会计处理规定
  • 生产成本物料的核算
  • 预交增值税附加税费减免吗
  • 工商年报中纳税总额包括工会经费吗
  • 员工社保异地缴纳
  • 专用发票的税票号码看哪里?
  • 企业卖固定资产
  • 非学历教育培训费发票
  • 现代服务业如何提升为人民服务
  • 房地产企业的非流动资产周转率在多少以上
  • 文化交流活动开展方案
  • PHP:curl_multi_getcontent()的用法_cURL函数
  • 股权转让协议合同
  • 应付票据抵付应付账款
  • 未取得合法有效凭证可以税前扣除
  • yii2框架从入门到精通
  • 什么情况下可以土葬
  • 退休返聘人员是否享受工会福利
  • 在php中如何对多条记录进行分页
  • uniapp和vue混合开发
  • c++好学
  • yii gridview
  • 铡刀演示
  • set nu命令
  • 商场售后返租
  • wordpress怎么用
  • 自产产品对外赠送的会计处理方法
  • 将外购商品用于捐赠的分录
  • 一般纳税人上月有普通发票收入没入账可以次月加上吗
  • 账实不符的后果和对策
  • 进出口总额用什么字母表示
  • 没有银行回单,只有银行对账单,可以入账吗
  • 帝国cms怎么用
  • linux下安装mysql数据库5.6源码安装,修改登录用户密码
  • 销售费用和管理费用占比多少合理
  • 土石方费用入什么科目
  • 其他人员讲课费会计分录
  • 技术服务合同的税率
  • 收到预收款开具发票如何入账
  • 购车怎么做会计分录
  • 自然人股权转让如何缴纳个人所得税
  • 会计错账的更正方法及适用范围
  • 新建公司需要什么
  • sql server使用
  • freebsd使用
  • ubuntu系统安装谷歌浏览器
  • win10官方要钱吗
  • win7 ie
  • netddeclnt.exe - netddeclnt是什么进程 有什么用
  • linux设置静态
  • windows定时计划
  • javascript例题
  • jquery实现(textarea)placeholder自动换行
  • base如何使用
  • vue中组件的作用是什么
  • javascript还有人用吗
  • jquery lazyload
  • unity入门教学
  • jquery可以实现哪些效果
  • onSaveInstanceState和onRestoreInstanceState触发的时机
  • python函数判断
  • 北京市国家税务局官网手机app
  • 出口退税的期限是多长
  • 重庆国税网上怎么申报
  • 海淀九所税务局电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设