本站业务范围:1、PC端软件开发、网站开发 2、移动端APP、网站、微信接口、微商城开发 3、视频教程、毕业设计辅导
 当前位置:文章中心 >> web前端技术
立即购买视频教程 在项目中使用 IScroll问题总结
夜鹰教程网 来源:www.yyjcw.com 日期:2017/6/30 10:59:06
分享到:
在项目中使用 IScroll问题总结

这篇文章不能解决你的问题?我们还有相关视频教程哦!

QQ:1416759661 新手QQ群:7835003  加Q远程协助!

在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术咨询: 购买教程  技术咨询:购买教程  大胆的加QQ咨询。

最近做了个 WEB APP 项目,用到了大名鼎鼎的 IScroll,滚动的效果的确很赞,但是坑也是特别多,下面总结一下,希望自后来者有帮助。


该项目现已开源在 github 上,https://github.com/ansiboy/ChiTuStore


一、 使用 absolute 定位

顶栏和底栏最好不要使用 fixed 定位,应该使用 absolute 定位。我最初使用的是 fixed 定位,页面从右往左呈现的时候,经常会出现两个问题:1、顶栏时不时地会消失掉,2、新页面在移动的过程中,顶栏在第一个页面顶栏的下方,不是预期中的叠起来。


二、 图片异步加载

页面中,如果包含有图片的,图片在加载前与加载后,页面的大小是不同的,由于页面的大小发生了变化,必须调用 iscroll 的 refresh 方法。但事实,很难知道图片何时加载完成。必须使用图片异步加载,待图片加载完成后,对页面进行刷新。


我使用的方法是:


使用的是图片替换的方法。先使用 JS 生成一张图,这张图片大小,和实际的图片大小是一致的,这样子页面就不会因为没有图片而变小了,也就是说,页面在图片载前和加载后的长度都是一样的。从而解决了因为图片的异步加载,而导致页面的大小发生变化,而需要频繁地刷新的问题。


三、 输入框键盘的弹出

下面两幅图,是键盘弹出前后的对比图,要注意的是,页面和侧边栏的顶栏都不见了,因为这里的顶栏用的都是 abstract 定位,在弹出键盘时,整个 document 对象,会往上移动。因此两个顶栏都不见了。但是,侧边栏的顶栏,在键盘消失的时候,会重新出现,而页不会。解决方法是在Input 失去焦点的时候,再滚动一下。


复制代码

        if (site.env.isIOS) {

            var $input = $(this.node).find('input[type="text"]');

            $input.focusout(function () {

                console.log('input focusout');

                $(document).scrollTop(0);

                $(document).scrollLeft(0);

            });

        }

复制代码

 


四、Click或tap事件的多次点击

在使用 button 按钮的时候,click 或 tap 事件会多次触发,具体原因尚不明确。但是,换成了 a 标签后,貌似没有出现这个问题了。


五、不要在安卓机上使用

IScroll 在安卓机上使用的效果,并不理想。特别是低版的安卓机,4.0版本。在安卓机上,我使用的都是原生的滚动


小结

总得来说,IScroll 还是非常不错的,尤其是对于 IOS 系统,更是必用不可。


复制链接 网友评论 收藏本文 关闭此页
上一条: 文件断点续传的实现  下一条: APP中图片的压缩与上传
购买夜鹰教程网视频教程
  推荐教程/优惠活动

  热门服务/教程目录

  夜鹰教程网  新手必看,详细又全面。
  夜鹰教程网  购买教程  夜鹰教程网  在线支付-方便
  夜鹰教程网  担保交易-快捷安全   夜鹰教程网  闪电发货
  夜鹰教程网  电话和QQ随时可以联系我们。
  夜鹰教程网 不会的功能都可以找我们,按工作量收费。

客服电话:153 9760 0032

购买教程QQ:1416759661  购买教程
  热点推荐
XML Schema学习笔记(1)
XML Schema学习笔记(2)
C#对XML文档的操作
ASP操作XMLDOM
XML入门教程:分析XML
百度新闻开放协议XML文档制作方法…
XSL 语言
用RSS做五分钟一自动更新的网站
XML入门教程:文档类型声明
XML教程:通过一个例子来学习XML的…
XML节点相关知识
把XML文件绑定到列表控件
XML+XSLT+CSS+JQuery+WebService组…
XHTML头部Doctype声明必不可少!
历数Firefox2.0对XML处理的改进
  尊贵服务
夜鹰教程网 承接业务:软件开发 网站开发 网页设计 .Net+C#+VS2008+MSsql+Jquery+ExtJs全套高清完整版视频教程
  最近更新
移动端视口的相关概念及其适配方案…
上传图片立即预览
web worker 实现js多线程
文件断点续传的实现
在项目中使用 IScroll问题总结
APP中图片的压缩与上传
git常用命令汇总
Git 常用命令介绍
Grunt.js学习教程
webpack学习指南
Webpack教程01
微信小程序第一批吃螃蟹的人
前端面试题-事件监听、继承、闭包…
HTML5 Canvas学习笔记-处理鼠标事…
canvas学习笔记
  工具下载  需要远程协助? 购买教程

sql2008视频教程 c#视频教程

VIP服务:如果您的某个功能不会做,可以加我们QQ,给你做DEMO!

JQUERY  Asp.net教程

MVC视频教程  vs2012
.NET+sql开发
手机:15397600032 C#视频教程下载
vs2012 vs2008 vs2010 sql2008 sql2005
Asp.Net  

教程咨询QQ:1416759661


这篇文章不能解决你的问题?我们还有相关视频教程哦!

QQ:1416759661 新手QQ群:7835003  加Q远程协助!

在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术咨询: 购买教程  技术咨询:购买教程  大胆的加QQ咨询。

关于我们 | 广告投放 | 购买教程 | 网站建设 | 技术辅导 | 常见问题 | 联系我们 | 友情链接 | 购买教程

Nighthawk Tutorials Network 快捷购买教程

夜鹰教程网 版权所有 www.yyjcw.com All rights reserved 备案号:蜀ICP备08011740号3

 

出售asp.net系列视频教程 高清原创版 每天晚上20:30--23:00在线 按照编号从简单到高级 http://www.yyjcw.com/list.html