当前位置：首页 > article >正文

【鸿蒙】实现新闻上下轮播滚动效果-harmonyos

article 2024/11/24 0:10:55

上效果：

在这里插入图片描述
没啥好写的下面就是所有了

代码


/**
 *
 * 上下轮播滚动
 * 使用场景：
 * 1、一般用于新闻上下滚动
 *
 * */

@Entry
@Component
struct SwiperVerticalPage {
  @State message: string = 'Hello World';
  private listSearch = [
    '中共中央召开党外人士座谈会'
    , '推动构建亚太命运共同体',
    '十九届六中全会精神新闻发布会'
    , '中方邀拜登出席东奥？外交部回应',
    '大连8天215人感染：多为大学生'
    , '胡塞武装突袭美国驻也门大使馆',
    '北交所15日开市 10家企业直接上市'
    , '腾讯与抖音商谈对等开放',
  ]
  build() {
    RelativeContainer() {
      Swiper(){
        ForEach(this.listSearch,(item:string)=>{
          Text(item)
            .height('100%')
            .fontSize(24)
            .fontColor(Color.White)
            .maxLines(1)
            .textOverflow({overflow:TextOverflow.Ellipsis})
            .margin({ left: 10 })
        }, (item:string) => item)
      }
      .vertical(true) // 布局格式，水平和竖直
      .autoPlay(true) // 是否自动播放
      .indicator(false) // 是否启用导航点指示器
      .interval(3000) // 使用自动播放时播放的时间间隔

    }
    .height('20%')
    .width('100%')
    .backgroundColor(Color.Red)
  }
}