Egret社区

图片滑动怎么写 具体点

2019-6-3 10:41
3726
6银子
教程看了不是很懂 求教

分享到 :
0 人收藏

6 个回复

倒序浏览
RY19960629  初窥堂奥 | 2019-6-3 11:48:49
你是要用List吗还是?
常歌行  官方团队 | 2019-6-3 11:57:16
图片横着滑动,竖着滑动,官方都有讲解http://developer.egret.com/cn/gi ... s/slider/index.html
shisuqing  登堂入室 | 2019-6-3 12:02:50
RY19960629 发表于 2019-6-3 11:48
你是要用List吗还是?

有什么呢???
shisuqing  登堂入室 | 2019-6-3 13:04:12
本帖最后由 shisuqing 于 2019-6-3 13:16 编辑

这个是滑块啊 并不是我想要的那种效果
ShaiLai  登堂入室 | 2019-6-3 13:53:20
来自网友提供,基本可以实现。

/**
*  文 件 名:ItemScroll.ts
*  功    能: 滚动组件
*  内    容: 自定义组件,支持多张图片水平(垂直)切换滚动
*
* Example:
* 1. 从自定义组件中找到ItemScroller,并拖动到exml上
* 2. 将需要显示对象(图片等)拖动到ItemScroller的Group下
* 3. 设置Group的布局为垂直or水平
*/
class ItemScroller extends eui.Scroller {
    /**滚动项数量*/
    public itemNum: number;
    /**单个滚动项长度*/
    public itemSize: number;
    /**当前滚动到第几项  0表示第1项*/
    public curItemCount: number = 0;
    /**滚动时间*/
    public delayScroll: number = 250;
    /**是否是水平滚动*/
    public isHScroller: Boolean;
    /**触摸起始位置*/
    private touchStartPos: number = 0;
    /**当前触摸位置和起始触摸位置距离*/
    private touchDist: number;

    public constructor() {
        super();
        this.addEventListener(eui.UIEvent.COMPLETE, this.onCreateComplete, this);
    }

    private onCreateComplete(): void {
        this.removeEventListener(eui.UIEvent.COMPLETE, this.onCreateComplete, this);

        //立即验证,获取width、height
        this.validateNow();

        //判断是垂直还是水平滚动
        var widthDist: number = this.viewport.contentWidth - this.viewport.width;
        if (widthDist > 0) {
            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;
        }

        console.log(this.itemNum);
        
        //滚动容器设置
        this.horizontalScrollBar.thumb.visible = false;
        this.verticalScrollBar.thumb.visible = false;
        this.bounces = true;
        this.addEventListener(eui.UIEvent.CHANGE_START, this.onChangeStartHandler, this);
        this.addEventListener(eui.UIEvent.CHANGE_END, this.onChangeEndHandler, this);
    }

    /**拖动开始*/
    private onChangeStartHandler() {
        if (this.isHScroller) {
            this.touchStartPos = this.viewport.scrollH;
        } else {
            this.touchStartPos = this.viewport.scrollV;
        }
    }

    /**拖动结束  拖动>=2项时无法调到正确的选项*/
    private onChangeEndHandler(): void {
        if (this.touchStartPos == -1) {
            return;
        }
        var dict: number = 0;
        if (this.isHScroller) {
            dict = this.viewport.scrollH - this.touchStartPos;
        } else {
            dict = this.viewport.scrollV - this.touchStartPos;
        }
            this.scrollToNext();
        // if (dict > 0) {
        //     this.scrollToNext();
        // } else if (dict < 0) {
        //     this.scrollToLast();
        // }
        this.touchStartPos = -1;
    }

    /**滑动到下一项*/
    public scrollToNext(): void {
        var item: number = this.curItemCount;
        if (item < this.itemNum - 1) {
            item++;
        }
        else if (item >= this.itemNum){
            item = 0;
        }
        console.log(item);
        
        this.scrollToItem(item);
    }

    /**滑动到上一项*/
    public scrollToLast(): void {
        var item: number = this.curItemCount;
        if (item > 0) {
            item--;
        }
        else if (item <= this.itemNum){
            //item = this.itemNum;
        }
        this.scrollToItem(item);
    }

    /**
     * 滚动到指定项 (0是第一项)
     * @item 指定项
     */
    public scrollToItem(item: number): void {
        if (item >= 0 && 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);
            }
        }
    }
}
shisuqing  登堂入室 | 2019-6-3 14:55:17
ShaiLai 发表于 2019-6-3 13:53
来自网友提供,基本可以实现。

/**

太迷了--------
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号 )

Powered by Discuz! X3.4 © 2001-2019 Comsenz Inc.

返回顶部