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)

然后在进行赋值

  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()

#list #滚动

上次更新: 2020/10/21, 11:10:06