开发者学堂课程【移动 Web 前端开发:分类页 -iscroll 区域滚动】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/594/detail/8435
分类页 -iscroll 区域滚动
一、iscroll 的用途
Iscroll 是做什么用的?
它是用来针对一个区域滚动的,每个需要使用滚动功能的区域均要进行初始化。结构比较简单。
“
wrapper”
下载相关文本发现 iscroll 有许多版本,使用常规版本即可,其他版本都有它自己的特点。
下载完成之后应该怎么去用,首先结构应该保证,具体使用就一句代码。
“
text/javascript
”
>
var myScroll = new IScroll(#wrapper);
打开内库找到 iscroll 相关文件,找到 iscroll.js,这就是基本类,最原始的版本。
引入到 js 当中,在 category.html 页面加一个:
”
js/comeon.js
”
>
再到 category.js 就可以使用了,那么 leftSwipe 方法就可以不用了。然后再声明一个方法
var iscrollLeft = function(){
/*使用iscroll*/
}
再把 leftSwipe();
方法注释替换掉。
//leftSwipe();
iscrollLeft();
使用方法初始化:
new IScroll(document.queryaSelector(
‘
.cate_left
’
))
写完这段代码之后刷新测试页面,进行效果测试。还可以通过参数配置实现不同功能。
参看 iscroll 文档,左右滚动配置:
options.scrollX
options.scrollX
默认情况下只纵向滚动条可以使用。如果需要使用横向滚动,需要scrollX 属性值设置为 true。
默认值:scrollX:false,srollY:true
例如实现页面左右滑动:
var rightSwipe = function(){
/*使用 iscroll*/
/*在谷歌的模拟器下失效*/
/*通过参数配置 实现左右滚动*/
new IScroll(document.queryaSelector(
‘
.cate_right
’
),{
scrollX:true
srollY:false
});
}
代码编写完后调整页面宽度。来到 category.html 修改 width:100%为:
.cate_right_box{
width:101%;
padding: 0 10px;
}
区域滚动功能就能实现了。