用过jqmobi的人都会知道,其自带滚动性别实在不可恭维,iscroll是一款专门针对移动前端滚动,做了特别优化的超级工具,大家可能都会想把jqmobi自带的给替换掉,但兼容性真是如履薄冰,以下是实操干货
1、添加iscroll.js文件,iscroll-lite.js是简化版,不带滚动条的
2、添加一个面板panel,设置为no-scroll,设置data-load时创建iscroll对象
<div id="pn_test" class="panel no-scroll" title="iscroll4测试" data-load="loaded"
data-defer="iscroll4.html" data-footer="none">
</div>
3、创建iscroll js对象代码
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper');//,{hScrollbar: false,vScrollbar:false}
}
4、iscroll4.html的代码,需要设置wrapper、scroller样式
<style type="text/css">
#wrapper {
position:absolute; z-index:1;
top:0px; bottom:0px; left:0;
width:100%;
/*background:#aaa;*/
overflow:auto;
}
#scroller {
position:absolute; z-index:1;
/* -webkit-touch-callout:none;*/
-webkit-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;*/
/*}*/
</style>
<div id="wrapper" >
<div id="scroller" >
<ul class="list inset">
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>Pretty row 3</li>
<li>Pretty row 4</li>
<li>Pretty row 5</li>
<li>Pretty row 6</li>
<li>Pretty row 7</li>
<li>Pretty row 8</li>
<li>Pretty row 9</li>
<li>Pretty row 10</li>
<li>Pretty row 11</li>
<li>Pretty row 12</li>
<li>Pretty row 13</li>
<li>Pretty row 14</li>
<li>Pretty row 15</li>
<li>Pretty row 16</li>
<li>Pretty row 17</li>
<li>Pretty row 18</li>
<li>Pretty row 19</li>
<li>Pretty row 20</li>
<li>Pretty row 21</li>
<li>Pretty row 22</li>
<li>Pretty row 23</li>
<li>Pretty row 24</li>
<li>Pretty row 25</li>
<li>Pretty row 26</li>
<li>Pretty row 27</li>
<li>Pretty row 28</li>
<li>Pretty row 29</li>
<li>Pretty row 30</li>
<li>Pretty row 31</li>
<li>Pretty row 32</li>
<li>Pretty row 33</li>
<li>Pretty row 34</li>
<li>Pretty row 35</li>
<li>Pretty row 36</li>
<li>Pretty row 37</li>
<li>Pretty row 38</li>
<li>Pretty row 39</li>
<li>Pretty row 40</li>
</ul>
</div>
</div>
5、$.ui.useTransition = false; //禁用动画可提高速度和三星手机的兼容性
- 浏览: 934193 次
- 性别:
- 来自: 山西
文章分类
最新评论
-
白小默:
你好 可以提供下源码DEMO吗,不知为何,我导出来的excel ...
jxls 使用模板文件导出生成excel -
zkzqzzz:
博主威武!
让微信二维码扫描您的APK -
zkzqzzz:
感谢博主 原来那些类都不是必须的 或者自己写!!博主真棒 ...
抢红包插件实现原理浅析 -
zkzqzzz:
博主 请问你的其他类在哪里呢?
抢红包插件实现原理浅析 -
zkzqzzz:
其他类在哪呢?
抢红包插件实现原理浅析
发表评论
-
IOS-HTML5-Video标签不能播放
2019-05-06 12:04 1513h5的video标签 在UIwebview ... -
Android客户端代码保护技术-完整性校验
2018-01-08 17:10 1252由于Android系统固有的缺陷、Android应用分发 ... -
android开发中手动v2签名实现方法
2018-01-08 10:31 1000用v2签名前要进行v1签名或zipalign。 1. z ... -
webview支持LocalStorage本地存储
2017-03-31 10:30 1363//允许JavaScript执行 ... -
七步配置phonegap+cordova+ionic开发环境
2016-12-19 16:21 691本文讲的是Android混合 ... -
iOS企业应用发布教程
2016-11-01 08:51 379iOS企业应用可以不经过app store发布,而可以直接在 ... -
IOS在自己网站发布APP(企业版$299上线流程)
2016-11-01 08:49 449最近刚上线一个企业内 ... -
梆梆加固破解
2016-10-13 09:01 1500本文假设你已经使用过梆梆加固,手头至少有个一个通过梆梆加固后 ... -
android zxing 扫描二维码 横屏转竖屏
2016-09-14 15:41 0Zxing 竖屏切换 Android 在google上下 ... -
封装Volley使Volley的每个请求都自动保存和发送Cookie
2016-09-14 10:57 0思路很简单,每次请求获取到服务器返回的response就解 ... -
Android二维码ZXing扫描区域大小的调整,提高扫描速度
2016-09-14 10:48 2638Zxing本身默认的扫图区域最大只有 360*480 ... -
解决Android二维码扫描ZXing竖屏拉伸变长闪退扫描区域小等问题
2016-09-14 10:42 1222Android 基于google Zxing实现二维码、条形 ... -
Android平台下利用zxing实现二维码开发
2016-09-14 09:25 478现在走在大街小巷都能看到二维码,而且最近由于项目需要,所以研 ... -
Zxing扫描二维码
2016-09-14 09:24 653摘要 android Zxing扫描二维码 横竖屏 ... -
Android 基于google Zxing实现二维码、条形码扫描,仿微信二维码扫描效果
2016-09-14 09:18 499转载请注明出处:http://blog.csdn.net/x ... -
xcode Run Script Command /bin/sh failed with exit code 1
2016-09-09 17:38 1229Xcode编译库报错:Command /bin/sh fai ... -
(二十三):Objective-C代码混淆扩展----安全攻防之代码混淆的一个小工具iOS安全攻防
2016-09-09 15:10 1173http://blog.csdn.net/yiyaaixu ... -
iOS安全–浅谈关于iOS加固的几种方法,代码混淆,类名方法名混淆等
2016-09-09 15:00 795转自:http://www.blogfshare ... -
Request获取用户真实IP
2016-09-05 11:26 565在Servlet里,获取客户端的IP地址的方法是:reque ... -
IOS UIAlertView(警告框)方法总结
2016-09-02 16:17 373摘要 在IOS8之后,UIAle ...
相关推荐
bapp-framework-2.1.0
intel appframework3.0测试版 jqmobi3.0测试版 App Framework 3.0和前面的版本比较有很大的变动。当本项目于2011开启之后,一直聚焦于修正系统的bug(比如安卓平台上的 CSS3 变换)、提供一个可靠的 scrolling ...
结合appframework 精简化适合开发和学习的一个框架;
jqMobi是由appMobi针对HTML5浏览器和移动设备开发的javascript框架,是个极快速的查询选择库,支持W3C查询。 版本 jqMobi源码最初在2012年1月份推出,基于MIT/X11许可证,托管在GitHub上,开发者可参与并通过插件...
jqmobi的帮助文档,全面的UI,使用浏览器打开F12调试查看源代码即可
jq.appframework.js 使用jquery 和afui 开发,而不必局限于appframework.js 可以参考我的博客:http://blog.csdn.net/vincentblog/article/details/38041609
appframework-3.0beta 3.0 测试版
今天 Intel 发布了其对 jQMobi 框架的改造版本 "Intel App Framework". 这个新的 HTML5 开发环境可完全免费下载,侧重于构建见人 iOS、Android 和 Windows Phone 8 甚至是 Kindle、Nook、Facebook 和 Windows 8 的...
appframework3.0 jqmobi3.0.0测试版,好多bug已被修复,赶紧下砸使用吧! ps: 交流企鹅群:333492644
jqMobi参考手册
有利于优化移动端代码,快速简单实现所需功能的框架集
JqMobi+PhoneGap项目实战 JqMobi基础知识
这是一整套完整的jqmobi icon图标大全
jqmobi1.02rc1 轻量级跨平台移动开发框架
使用jqmobi,模仿微信做工作管理系统
jqMobi学习笔记,方便查询使用,学习笔记,方便查询使用
jqmobi+phonegap+手机触屏滑动效果js 动态设置手机高宽度
Jqmobi做的百度地图,支持三维地图 源码
利用Jqmobi框架做的百度地图,支持三维地图,附上全部源码,初学者可以看一下
支持大部分时间控件还有下拉选择功能,支持大多移动web框架