鸿蒙开发购买记录或者中奖动态轮询循环滚动效果

本文链接：https://blog.youkuaiyun.com/u010074743/article/details/142351449

鸿蒙开发购买记录或者中奖动态轮询循环滚动效果

鸿蒙做一幕幕循环滚动的效果不是很容易，不像Android的recycleView，直接设置滚动效果即可。效果也差一点

一、思路

用swiper，设置它的displayCount，interval，duration，三个属性进行配合

二、效果图

在这里插入图片描述

三、关键代码如下：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  moodNewestBeanList: BaseDataSource<MoodNewestBean> = new BaseDataSource()

  aboutToAppear(): void {
      let moodNewestBeans :MoodNewestBean[] = []

       moodNewestBeans.push({
          headImage:'https://i1.hdslb.com/bfs/archive/46c0e69dc6b00631d6a0727d83f6e73daf0eaa4a.jpg',
          nickName:'两仪式1',
          timeRemark:'5分钟前',
          remark:'购买了金币'
       } as MoodNewestBean)
        moodNewestBeans.push({
          headImage:'https://i0.hdslb.com/bfs/archive/0eac529368e7299e0339d802f2a4968d14283496.jpg',
          nickName:'两仪式2',
          timeRemark:'4分钟前',
          remark:'购买了VIP'
        } as MoodNewestBean)
        moodNewestBeans.push({
          headImage:'https://imgs.aixifan.com/content/2019_12_7/1.575711570386709E9.jpeg',
          nickName:'两仪式3',
          timeRemark:'3分钟前',
          remark:'购买了SVIP'
        } as MoodNewestBean)
        moodNewestBeans.push({
          headImage:'https://imgs.aixifan.com/content/2019_12_7/1.5757115942781591E9.png',
          nickName:'两仪式4',
          timeRemark:'2分钟前',
          remark:'送了一个礼物'
        } as MoodNewestBean)
        moodNewestBeans.push({
          headImage:'https://img0.baidu.com/it/u=3418800960,2641848399&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
          nickName:'两仪式5',
          timeRemark:'1分钟前',
          remark:'送了一个666'
        } as MoodNewestBean)
        moodNewestBeans.push({
          headImage:'https://i1.hdslb.com/bfs/archive/bd7066e4e143823cff8cd63db052d1d0cc8505c1.jpg',
          nickName:'两仪式6',
          timeRemark:'刚刚',
          remark:'充值了66'
        } as MoodNewestBean)
    this.moodNewestBeanList.setNewData(moodNewestBeans)
  }

  build() {
    Stack() {
      OutReachNewestList({radius:5,moodNewestBeanList:this.moodNewestBeanList})

    }
    .height('100%')
    .width('100%')
  }
}