【HarmonyOS 鸿蒙黑马程序员学习笔记 75.1】

原创

已于 2024-11-27 13:18:22 修改 · 283 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #学习 #笔记 #javascript #typescript #华为

于 2024-11-27 11:37:05 首次发布

轮播组件 Swiper

Swiper () {内容}

通常尺寸给 Swiper 设置
内容会拉伸到 Swiper 大小

循环 loop

.loop(true)	//	默认值

自动循环 autoPlay

.autoPlay(false)	//	默认值

自动循环间隔 interval

.interval(3000)

纵向滑动 vertical

.vertical(false)	//	默认值

轮播导航点 indicator

一旦对轮播导航点进行设置
导航点将自动修改为显示

      .indicator(false) //  隐藏轮播导航点
      .indicator(
        Indicator.dot() //  轮播导航按钮设置
          .itemWidth(20)  //  未选中宽
          .itemHeight(20) //  未选中高
          .color('#999')  //  未选中颜色
          .selectedItemWidth(40)  //  选中宽
          .selectedItemHeight(40) //  选中高
          .selectedColor('#00f')  //  选中颜色

轮播箭头 displayArrow

下面是查看官方示例,自己领悟的,请谨慎使用

      .displayArrow({ // 设置导航箭头样式
        showBackground: true, //  是否在背景上显示
        isSidebarMiddle: false, //  是否位于内容两侧
        backgroundSize: 40, //  背景大小
        backgroundColor: Color.White, //  背景颜色
        arrowSize: 40,  //  箭头大小
        arrowColor: Color.Red //  箭头颜色
      }, false)  //  是否隐藏  true隐藏  false不隐藏

固定宽高比 aspectRatio

.aspectRatio(1)

便于适配不同的屏幕大小,不至于漏信息

简易示例

根据老师要求做一个纵向布局的,这是第二版
在这里插入图片描述

@Entry
@Component
struct Index {
   
   
  @State jd1: string = ''

  build() {
   
   
    Column(){
   
   
      Swiper(){
   
   
        Text('1').backgroundColor('#f00').fontSize(40).padding(