Laya轮播

有个需求,要求当条目大于五的时候,且三十秒没有新增条目时,进行轮播,每两秒展示一个。当有新增条目时,暂停轮播,展现新条目。

需求

一开始想用Laya的list来做,结果发现tweenTo、scrollTo、scrollBar等均不能满足一直轮播,只能播到最后,在划回去。

最后采用五个Label组件+Panel组件来做,panel组件展现四个Label。

先获取原本的Label组件位置和对Label赋值。

        public txtList=[1,2,3,4,5,6,7,8,9,10]
        public yList=[];
        public moduleList=[];
        public txtListIndex=1;
        public newTxt='新的数据'
        loadPanelList() {
            let nodeList = []
            let list = []
            for (let index = 0; index < 5; index++) {
                let txt = this.panelList.getChildAt(index)
                if(this.txtList[index]){
                  txt.text=this.txtList[index]+''
                  this.moduleList.push(nod)
                  this.yList.push(nod.y)
                  this.indexNumber = index
                }else{
                    txt.visible = false
                }
            }
            // 如果多于五个 则进行定时移动
            if(this.moduleList.length>5){
              this.Timing();
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

加一个定时器,定时30秒进行滚动。

     Timing() {
          Laya.timer.once(30000, this, this.movePanelList)
        }
1
2
3

然后两秒移动一次

movePanelList(){
  Laya.timer.loop(2000, this, this.move)
}
1
2
3

移动的方法

        move{
            for (let i = 0; i < 5; i++) {
                if (this.moduleList[i].y < -25) {
                    this.moduleList[i].y = this.yList[4]
                    this.txtListIndex++;
                    if (this.txtListIndex >=this.txtList.length) this.txtListIndex = 0;
                    this.moduleList[i].updateData(this.txtList[this.txtListIndex])
                }
                Laya.Tween.to(this.moduleList[i], { y: this.moduleList[i].y - 27.5 }, 1000)
            }
        }
1
2
3
4
5
6
7
8
9
10
11

目前 就可以实现一直滚动的效果了。

然后 我们在进行 当有新增条目时,暂停轮播,展现新条目。

新增条目的时候,先停止所有的定时器。

    Laya.timer.clearAll(this)
1

然后在进行赋值

  for (let index = 0; index < 5; index++) {
      if(index>1){
        this.moduleList[index].y = this.ylist[index+1]
        this.moduleList[index].text=this.txtList[index]+''
      }else{
        this.moduleList[index].y=this.this.ylist[0]
        this.moduleList[index].text=this.newTxt+''
      }
        this.cellList.nodeList[index].updateData((manager.honorThrone.history[index]))
    }
1
2
3
4
5
6
7
8
9
10

最后在执行一下定时方法 就可以了

      this.Timing()
1
上次更新: 2020/10/28, 7:10:00
最近更新
01
1447题-最简分数
10-28
02
搜狗微信文章的抓取
10-26
03
TypeScript中实现swap
10-21
更多文章>