Swiper轮播图组件、Grid网格组件、Scroll组件今日组件：1.Swiper轮播图组件及常用属性2.Grid网

今日组件

1.Swiper组件

Swiper组件就是大家常见的轮播图组件。

- Swiper基本用法：

Swiper(){
	//轮播内容
	//设置（尺寸，撑开Swiper）
}
//设置尺寸（内容拉伸，优先级高）
.width('100%')
.height(100)

- Swiper常用属性：

loop	boolean	是否开启循环；默认值为 true
		设置为 true表示开启循环，在LazyForEach懒循环加载模式下，加载的组件数量建议大于5个
autoPlay	boolean	子组件是否自动播放；默认值为false
		loop为false时，自动轮播到最后一页时停止轮播。手势切换后不是最后一页时继续播放
interval	number	使用自动播放的时间间隔，单位为毫秒；默认值：3000
vertical	boolean	是否纵向滑动；默认值为 false

eg:尝试编写一个自动播放，间隔4秒，纵向滑动的Swiper

- 调整导航点

1.导航点类型及隐藏与否

indicator		设置可选导航点指示器样式
indicator(DotIndicator.dot())	DotIndicator	DotIndicator：圆点指示器样式
indicator(DotIndicator.digit())	DigitIndicator	DigitIndicator：数字指示器样式
	boolean	boolean：是否用导航点指示器；默认值为true；默认类型 `DotIndicator`

eg:导航点的属性使用：

Swiper(){
  // 略
}
.indicator(false) // 关闭导航
.indicator(DotIndicator.dot()) // 圆点指示器（默认）
.indicator(DotIndicator.digit()) // 数字指示器

2.导航点位置

参数名	参数类型	必填项	参数描述
left	Length	否	设置导航点距离Swiper组件左边的距离
			默认值：0vp
top	Length	否	设置导航点距离Swiper组件顶部的距离
			默认值：0vp
right	Length	否	设置导航点距离Swiper组件右边的距离
			默认值：0vp
bottom	Length	否	设置导航点距离Swiper组件底部的距离
			默认值：0vp

3.导航点常用样式

参数名	参数类型	必填项	参数描述
itemWidth	Length	否	设置Swiper组件圆点导航指示器的宽，不支持百分比设置
			默认值：6vp
itemHeight	Length	否	设置Swiper组件圆点导航指示器的高，不支持百分比设置
			默认值：6vp
selectedItemWidth	Length	否	设置被选中的Swiper组件圆点导航指示器的宽，不支持设置百分比。
			默认值：12vp
selectedItemHeight	Length	否	设置被选中的Swiper组件圆点导航指示器的高，不支持设置百分比。
			默认值：12vp
color	ResourceColor	否	设置Swiper组件圆点导航指示器的颜色
			默认值：‘#182431’（10%透明度）
selectedColor	ResourceColor	否	设置选中Swiper组件圆点导航指示器的颜色
			默认值：’#007DFF‘

导航点使用方法：

Swiper() {
     // 略
  }
  .width('100%')
  .height(160)
  .indicator(
    Indicator.dot() // 圆点类型
      .selectedColor(Color.White) // 选中到颜色
      .selectedItemWidth(30) // 选中的宽度
      .selectedItemHeight(4) // 选中都高度
      .itemWidth(10) // 默认宽度
      .itemHeight(4) // 默认宽度
  )

- 页面切换样式 `SwiperController`

①核心步骤

实例化控制器 ---- > 设置给Swiper ----- > 调用控制器方法

②`SwiperController`对象核心方法：

· showNext():void 翻至下一页。翻页带动效切换过程，时长通过duration指定

· showPrevious():void 翻至上一页。翻页带动效切换过程，时长通过duration指定

eg:具体使用例子

@Entry
@Component
struct SwiperDemo {
  // 1.创建控制器对象
  controller: SwiperController = new SwiperController()

  build() {
    Column({ space: 10 }) {
      // 2. 设置给 Swiper
      Swiper(this.controller) {
        // 略
      }
      Row() {
        Button('上一页')
          .onClick(() => {
            // 3.调用控制器的方式实现切换效果
            this.controller.showPrevious()
          })
        Button('下一页')
          .onClick(() => {
            this.controller.showNext()
          })
      }

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

    // .padding(20)
  }
}

2.Grid网格布局

如果布局是由很多的行与列组成的，行列可能需要合并、滚动，就可以使用网格布局，比如这样：

①固定行列

Grid() {
  GridItem(){
    // 展示的内容放在这里
  }
  GridItem(){
    // 展示的内容放在这里
  }
}

Grid的子组件必须是 GridItem组件，需要展示的内容设置在 GridItem内部
GridItem只能有一个子组件
若Grid组件设置宽高属性，则其尺寸就是设置值；若没有，Grid组件宽高属性，默认适应其父母的组件

名称	参数类型	解释
columnsTemplate	string	设置当前网格布局列的数量或最小列宽值，不设置时默认1列。
		例如, '1fr 1fr 2fr' 是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。
		设置为'0fr'时，该列的列宽为0，不显示GridItem。设置为其他非法值时，GridItem显示为固定1列。
rowsTemplate	string	设置当前网格布局行的数量或最小行高值，不设置时默认1行。
		例如, '1fr 1fr 2fr'是将父组件分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。
		设置为'0fr'，则这一行的行宽为0，这一行GridItem不显示。设置为其他非法值，按固定1行处理。
columnsGap	Length	设置列与列的间距。；默认值：0
		设置为小于0的值时，按默认值显示。
rowsGap	Length	设置行与行的间距。；默认值：0
		设置为小于0的值时，按默认值显示。

②合并行列（不滚动）

需要通过 GridItem的如下属性实现：

名称	参数类型	描述
rowStart	number	指定当前元素起始行号。
rowEnd	number	指定当前元素终点行号。
columnStart	number	指定当前元素起始列号。
columnEnd	number	指定当前元素终点列号。

③Grid设置滚动（`rowsTemplate`--水平；`columnsTemplate`--垂直）

Grid(){
    //....
}
.columnsTemplate('1fr 1fr 1fr') // 竖向滚动
.rowsTemplate('1fr 1fr 1fr') // 横向滚动

④代码控制滚动

步骤：

创建 Scroller对象
设置给 Grid
调用 Scroller对象的 scrollPage方法

具体方法：

scroller: Scroller = new Scroller()

// 设置给 Grid
 Grid(this.scroller) {
   // ...
 }

// 通过代码控制
this.scroller.scrollPage({
  next:true // 下一页
  next:false // 上一页
})

3.Scroll组件

可滚动，主要用于“一键回到顶部”

①具体用法：

Scroll(){
  // 只支持一个子组件
  Column(){
    // 内容放在内部
    // 尺寸超过 Scroll 即可滚动
  }
}
.width('100%')
.height(200)

②常用属性：

名称	参数类型	描述
scrollable	ScrollDirection	设置滚动方向： ScrollDirection.Vertical 纵向(默认) ScrollDirection.Horizontal 横向
scrollBar	BarState	设置滚动条状态
scrollBarColor	string \ number \ Color	设置滚动条的颜色。
scrollBarWidth	string \ number	设置滚动条的宽度
edgeEffect	value:EdgeEffect	设置边缘滑动效果。EdgeEffect.None 无EdgeEffect.Spring 弹簧EdgeEffect.Fade 阴影

②Scroll的控制器:

场景：

页面滚动超过一定距离，显示“一键返回顶部”，反之隐藏
点击“一键返回顶部”，返回顶部

步骤：

实例化 Scroller的控制器
绑定给 Scroll
调用控制器的方法控制滚动，通过控制器的属性获取滚动距离

使用eg：

@Entry
@Component
struct ScrollDemo {
  scroller: Scroller = new Scroller()

  build() {
    Column() {
      Scroll(this.scroller) {
        // 内容略
      }
      Row() {
        Button('返回顶部')
          .onClick(() => {
            // 滚到顶部
            this.scroller.scrollEdge(Edge.Top)
          })

        Button('获取滚动距离')
          .onClick(() => {
            const x = this.scroller.currentOffset().xOffset
            const y = this.scroller.currentOffset().yOffset
            AlertDialog.show({
              message:`x:${x},y:${y}`
            })
          })
      }
    }
  }
}

(1)scrollEdge方法参数

滚动到容器边缘，不区分滚动轴方向，Edge.Top和Edge.Start表现相同，Edge.Bottom和Edge.End表现相同。

this.scroller.scrollEdge(Edge.Top) //滚动到顶部 this.scroller.scrollEdge(Edge.Start) //滚动到开头 this.scroller.scrollEdge(Edge.Bottom) //滚动到底部 this.scroller.scrollEdge(Edge.End) //滚动到结尾

(2)currentOffest（获取偏移量，单位：vp）

this.scroller.currentOffset().xOffset // x 轴滚动距离 this.scroller.currentOffset().yOffset // y 轴滚动距离

(3)onWillScroll()

如果是api在12以下，使用 onScroll()

onWillScroll与 onScroll存在bug:所获取的偏移值不准确，因此在函数内部调用 currentOffset结合使用，最终输出偏移量

名称	功能描述
onWillScroll(event: (xOffset: number, yOffset: number) => {})	滚动事件回调, 返回滚动时水平、竖直方向偏移量。触发该事件的条件：1、滚动组件触发滚动时触发，支持键鼠操作等其他触发滚动的输入设置。2、通过滚动控制器API接口调用。3、越界回弹。

Scroll(){
  // 内容略
}
  .onWillScroll((x,y)=>{
    // 滚动时 一直触发
    // 可以结合 scroller的currentOffset方法 获取滚动距离
    let yoffset=this.scroller.currentOffset.yOffset
    console.log('',yoffset)
  })

Swiper轮播图组件、Grid网格组件、Scroll组件