EUI Scroller实现图片轮播 组件 ItemScroller
一 自定义组件如下
/**
* 文 件 ScrollView.ts
* 功 能: 滚动组件
* 内 容: 自定义组件,支持多张图片水平(垂直)切换滚动
*
* Example:
* 1. 从自定义组件中找到ScrollView,并拖动到exml上
* 2. 将需要显示对象(图片等)拖动到ScrollView的Group下
* 3. 设置Group的布局为垂直or水平
*/
class ScrollView extends eui.Scroller {
/**页面总数*/
public itemNum: number;
/**单页尺寸*/
public itemSize: number;
/**当前第几项 0表示第1项*/
public curItemCount: number = ;
/**滚动时间 从一页滑动到另一页的时间*/
public delayScroll: number = ;
/**是否是水平滚动*/
public isHScroller: Boolean;
/**触摸起始位置*/
private touchStartPos: number;
/**记录开始划动时间*/
private startTime:number;
/**翻页时间阈值,在阈值内完成划动,划动距离不需要大于屏幕1/3,也会向手指划动方向翻页 */
private immediatelyTime:number = ;
//是否第一次移动,用于记录移动开始时间
private bFirstMove:boolean = true; /**
* 初始化
*/
public init(){
//立即验证,获取width、height
this.validateNow(); //判断是垂直还是水平滚动
var widthDist: number = this.viewport.contentWidth - this.viewport.width;
if(widthDist > ) {
this.isHScroller = true;
this.itemSize = this.viewport.width;
this.itemNum = this.viewport.contentWidth / this.viewport.width;
} else {
this.isHScroller = false;
this.itemSize = this.viewport.height;
this.itemNum = this.viewport.contentHeight / this.viewport.height;
} //滚动容器设置
this.throwSpeed = ;
this.bounces = true;
this.addEventListener(eui.UIEvent.CHANGE_START,this.onChangeStartHandler,this);
this.addEventListener(eui.UIEvent.CHANGE, this.onChangeHanlder, this);
this.addEventListener(eui.UIEvent.CHANGE_END,this.onChangeEndHandler,this);
} /**拖动开始*/
private onChangeStartHandler() {
this.bFirstMove = true;
} //第一次移动开始,记录开始时间
private onChangeHanlder(e:eui.UIEvent){
if(this.bFirstMove){
this.bFirstMove = false;
this.startTime = egret.getTimer();
if(this.isHScroller) {
this.touchStartPos = this.viewport.scrollH;
} else {
this.touchStartPos = this.viewport.scrollV;
}
egret.Tween.removeTweens(this.viewport);
}
} /**拖动结束*/
private onChangeEndHandler(): void {
if(this.touchStartPos == -){ //防点击触发changeend,因为如果不禁止,单纯点击touch_tap也能触发change_end事件,也会翻页
return;
}
var dict: number; //手指划动距离
if(this.isHScroller) {
dict = this.viewport.scrollH - this.touchStartPos;
} else {
dict = this.viewport.scrollV - this.touchStartPos;
} //短时间内划动,划动距离小于1/3屏幕也能翻页
if(egret.getTimer() - this.startTime < this.immediatelyTime){
if(dict > ) {
this.scrollToNext();
} else if(dict < ) {
this.scrollToLast();
}
//计算划动距离大过1/3屏幕,才会翻页,否会回弹到当前页面
}else{
if(dict > this.viewport.width/) {
this.scrollToNext();
} else if(dict < -this.viewport.width/) {
this.scrollToLast();
}else{
this.scrollToItem(this.curItemCount);
}
}
//防touch_tap触发change_end
this.touchStartPos = -;
} /**滑动到下一项*/
public scrollToNext(): void {
var item: number = this.curItemCount;
if(item < this.itemNum - ) {
item++;
}
this.scrollToItem(item);
} /**滑动到上一项*/
public scrollToLast(): void {
var item: number = this.curItemCount;
if(item > ) {
item--;
}
this.scrollToItem(item);
}
/**
* 滚动到指定项 (0是第一项)
* @item 指定项
*/
public scrollToItem(item: number): void {
if(item >= && item < this.itemNum) {
this.curItemCount = item;
egret.Tween.removeTweens(this.viewport);
if(this.isHScroller) {
egret.Tween.get(this.viewport).to({ scrollH: item * this.itemSize,ease: egret.Ease.quadOut },this.delayScroll);
} else {
egret.Tween.get(this.viewport).to({ scrollV: item * this.itemSize,ease: egret.Ease.quadOut },this.delayScroll);
}
}
} /**启用组件触摸 */
public enableTouch(){
this.touchEnabled = true;
this.touchChildren = true;
} /**禁用组件触摸 */
public disableTouch(){
this.touchChildren = false;
this.touchEnabled = false;
} /**销毁*/
public destroy() { }
}
二 exml中使用
将Image拖动到Group下,高宽和Group一致。
Group布局设置为垂直或水平,设置间隙为0
在ts里获取这个组件,并init初始化即可
三 实际效果
EUI Scroller实现图片轮播 组件 ItemScroller的更多相关文章
- 一分钟搞定AlloyTouch图片轮播组件
轮播图也涉及到触摸和触摸反馈,同时,AlloyTouch可以把惯性运动打开或者关闭,并且设置min和max为运动区域,超出会自动回弹. 除了一般的竖向滚动,AlloyTouch也可以支持横向滚动,甚至 ...
- Omi-touch实战 移动端图片轮播组件的封装
pc端的轮播,移动端的轮播都很常见.一年前,我还为手机端没有左滑,右滑事件从而封装了一个swipe库,可以自定义超过多少滑动时间就不触发,也可以设置滑动多少距离才触发,这一个功能的代码就达到400多行 ...
- Angular2组件与指令的小实践——实现一个图片轮播组件
如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图.而除了直接看的见的躯体之外,一个完整的" ...
- 如何将angular-ui的图片轮播组件封装成一个指令
在项目开发中我们经常会遇到图片轮播的功能点: 如果我们开发人员自己原生手写,将会花费很多的时间,最终得不偿失. 接下来就详细说说如何使用angular-ui发热图片轮播模块,并且将它写成一个指令(便于 ...
- Vue学习—Vue写一个图片轮播组件
1.先看效果: 熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播.我认为使用图片轮播. 第一可以给人以一种美观的感受,而不会显得网站那么呆板, 第二可以增加显示内容,同样的区域可以显示更多内 ...
- 如何将angular-ui-bootstrap的图片轮播组件封装成一个指令
在项目开发中我们经常会遇到图片轮播的功能点: 如果我们开发人员自己原生手写,将会花费很多的时间,最终得不偿失. 接下来就详细说说如何使用angular-ui发热图片轮播模块,并且将它写成一个指令(便于 ...
- EUI Scroller实现自定义图片轮播 组件ScrollView
一 自定义组件如下 /** * 文 件 ScrollView.ts * 功 能: 滚动组件 * 内 容: 自定义组件,支持多张图片水平(垂直)切换滚动 * * Example: * 1. 从自定义组件 ...
- JavaScript实现图片轮播组件
效果: 自动循环播放图片,下方有按钮可以切换到对应图片. 添加一个动画来实现图片切换. 鼠标停在图片上时,轮播停止,出现左右两个箭头,点击可以切换图片. 鼠标移开图片区域时,从当前位置继续轮播. 提供 ...
- vue实例之组件开发:图片轮播组件
一.普通方式: 其中,index是关键. <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
随机推荐
- java1234教程系列笔记 S1 Java SE 0101 HelloWorld
本节分为三讲.java概览,第二节讲了安装jdk 配置环境变量 第三节讲了经典的hello world 1.新建一个txt文本 public class chapter0102{ public sta ...
- C++ 资源大全
http://www.uml.org.cn/c++/201411145.asp http://ezlippi.com/blog/2014/12/c-open-project.html <C++ ...
- nginx(tengine)的一些小优化(持续更新)
1.nginx日志切割脚本 需求来源:nginx本身并没有日志切割的功能,由访问产生的大日志很难进行分析. 实现目的:每天对nginx日志进行切割,并备份至指定文件夹. 简要指令: mv /usr/l ...
- 百度地图api 标注的图标不显示问题
图中郑州PPT设计制作中心前面应该有一个小的标,但是死活就是不显示. 经过百度搜索和测试,终于解决.应该是页面定义的CSS和百度的冲突了,解决办法如下: 在当前页面中,加入 <style typ ...
- maven笔记
jar间接依赖: 被依赖的jar的范围要设置成compile,因发布会包含test范围依赖的jar包. 建立项目之间的联系:先在pom中设定依赖关系,然后可以引用了 .conf: C ...
- JSON转Dictionary
方法很简单,留作以后使用. System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Scrip ...
- Python中对字节流/二进制流的操作:struct
前言 前段时间使用Python解析IDX文件格式的MNIST数据集,需要对二进制文件进行读取操作,其中我使用的是struct模块.查了网上挺多教程都写的挺好的,不过对新手不是很友好,所以我重新整理了一 ...
- 测试 ClownFish、CYQ、Entity Framework、Moon、MySoft、NHibernate、PDF、XCode数据访问组件性能
下期预告: 由于很多园友反馈,有的组件不应该缺席.测试复杂度不够.测试还缺乏一定的公平. 因此考虑在下一个版本中,确保在更加公平的前提下进行更高复杂度的测试 . 同时将分为2组测试,纯SQL组件及纯O ...
- HDU 1166 敌兵布阵(线段树单点更新)
敌兵布阵 单点更新和区间更新还是有一些区别的,应该注意! [题目链接]敌兵布阵 [题目类型]线段树单点更新 &题意: 第一行一个整数T,表示有T组数据. 每组数据第一行一个正整数N(N< ...
- C#程序实现动态调用DLL的研究(转)
摘 要:在<csdn开发高手>2004年第03期中的<化功大法——将DLL嵌入EXE>一文,介绍了如何把一个动态链接库作为一个资源嵌入到可执行文件,在可执行文件运行时,自动从资 ...