分类页 -iscroll 区域滚动|学习笔记

简介: 快速学习 分类页 -iscroll 区域滚动

开发者学堂课程【移动 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;

}

区域滚动功能就能实现了。

相关文章
|
8月前
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
|
6月前
|
JavaScript 前端开发
vue 页面下滚到目标元素的位置,目标元素自动吸顶(自动悬浮吸附到页面顶部)
vue 页面下滚到目标元素的位置,目标元素自动吸顶(自动悬浮吸附到页面顶部)
398 0
|
前端开发 JavaScript 容器
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
83 0
|
8月前
|
Android开发
热点共享蓝条下压,导致页面底部按钮显示不全的完美解决方案
热点共享蓝条下压,导致页面底部按钮显示不全的完美解决方案
49 0
|
8月前
|
Android开发
个人热点蓝条出现和消失时,页面下压和恢复导致页面混乱及蓝条下压页面底部控件看不到的问题
个人热点蓝条出现和消失时,页面下压和恢复导致页面混乱及蓝条下压页面底部控件看不到的问题
66 0
|
8月前
|
定位技术 iOS开发
在地图页面,自动布局控件开始是隐藏或在屏幕外需要正常显示时再为正常的显示状态的,需要在显示之前加入
在地图页面,自动布局控件开始是隐藏或在屏幕外需要正常显示时再为正常的显示状态的,需要在显示之前加入
55 0
layui列表页滚动时弹出窗无法居中的解决方案
layui列表页滚动时弹出窗无法居中的解决方案
137 0
利用offsetTop和scrollTop实现移动端常见的当分类栏移动到顶部时固定位置效果
利用offsetTop和scrollTop实现移动端常见的当分类栏移动到顶部时固定位置效果
206 0
|
前端开发 开发者 容器
分类页-两栏自适应 |学习笔记
快速学习 分类页-两栏自适应
101 0
分类页-两栏自适应 |学习笔记
|
JavaScript
原生js判断某个区域的滚动条滚动到了底部
原生js判断某个区域的滚动条滚动到了底部
原生js判断某个区域的滚动条滚动到了底部