HarmonyOSNext：简单实现页面的滚动

哈哈哈先生
375 阅读11分钟

HarmonyOSNext：简单实现页面的滚动

前言:

本文旨在深入探讨鸿蒙开发中的滑动组件，分析其在提升用户交互体验中的作用和重要性。我们将从滑动组件的基本概念出发，逐步展开到其在鸿蒙系统中的实现方式、设计原则以及实际应用案例。通过本文，读者将能够获得关于如何在鸿蒙应用中有效利用滑动组件的宝贵知识和启发。

使用场景：

  1. 网页浏览：在网页上，滚动允许用户查看超出浏览器窗口的文本、图片和其他媒体内容。
  2. 文档阅读：在文档编辑器中，如Microsoft Word或Google Docs，滚动功能使读者能够浏览长文档。
  3. 电子表格：在Excel等电子表格软件中，滚动用于查看和编辑跨越多个列和行的数据。
  4. 图像查看器：在图像查看器或图形设计软件中，滚动用于放大后的图像浏览。
  5. 移动应用：在移动应用中，滚动用于浏览新闻、社交媒体动态、列表和菜单等。
  6. 桌面应用：在桌面应用程序中，滚动条或滚动手势用于浏览长列表、日志文件或设置选项。
  7. 电子书阅读：电子书阅读器中，滚动允许用户在电子书籍中快速翻页或浏览章节。
  8. 数据可视化：在数据可视化工具中，滚动用于查看图表和图形的详细视图。
  9. 在线购物：在电子商务网站上，滚动用于浏览商品列表、用户评论和产品描述。
  10. 多媒体播放器：在视频或音频播放器中，滚动条用于控制播放进度。
  11. 游戏界面：在某些游戏中，滚动用于浏览游戏菜单、角色属性或地图。
  12. 实时监控：在实时监控系统中，滚动用于查看时间序列数据或日志信息。
  13. 虚拟桌面：在虚拟桌面环境中，滚动用于浏览虚拟空间中的对象或内容。
  14. 电子邮件客户端：在电子邮件客户端中，滚动用于浏览邮件列表或阅读长邮件。
  15. 社交媒体平台：在社交媒体平台上，滚动用于浏览动态、帖子和评论。

​滚动的使用场景非常广泛，几乎涵盖了所有需要浏览大量信息的场合。设计师和开发者需要根据具体场景和用户需求，合理设计滚动机制，以提供流畅和直观的用户体验。

scroll--滑动组件

​简述: 可滚动组件容器，当页面内容的宽度或高度大于页面的宽度或高度，内容可以具有滚动效果，产生更好的页面效果。

核心用法：

文字简述：

  1. 为scroll组件设置尺寸。

  2. 设置子组件（只支持一个子组件，但子组件可以套组件）。

  3. 为子组件设置尺寸。

    a. 横向滚动：在高度相同下需要设置子组件的宽度必须大于scroll组件的宽度。

    b. 纵向滚动：在宽度相同下需要设置子组件的高度必须大于scroll组件的高度。

  4. 根据需求来调整scroll属性。

简单实现：

效果：

scroll1.gif

代码：

@Entry
@Component
struct Index {
  build() {
    Column(){
      Scroll(){
        Column(){
          Image($r('app.media.1'))
            .width('100%')
          Image($r('app.media.2'))
            .width('100%')
          Image($r('app.media.1'))
            .width('100%')
        }
        .width('100%')
        .layoutWeight(1)
      }
      .width('100%')
      .height('100%')
      .scrollBar(BarState.On)
      .scrollBarColor(Color.Orange)
      .edgeEffect(EdgeEffect.Fade)
    }
    .width('100%')
    .height('100%')
  }
}

常用属性：

名称参数类型描述
scrollableScrollDirection设置滚动方向。ScrollDirection.Vertical 纵向ScrollDirection.Horizontal 横向
scrollBarBarState设置滚动条状态。
scrollBarColorstring | number | Color设置滚动条的颜色。
scrollBarWidthstring | number设置滚动条的宽度
edgeEffectvalue:EdgeEffect设置边缘滑动效果。EdgeEffect.None 无EdgeEffect.Spring 弹簧EdgeEffect.Fade 阴影

Scroll 的控制器：

效果目的： 点击回到顶部的组件图片做到直接回到顶部。

效果：

scroll2.gif

代码：

@Entry
@Component
struct Index {
  //创建控制器
  scroll:Scroller=new Scroller()
  build() {
    Column(){
      //绑定控制器
      Scroll(this.scroll){
        Column(){
          Image($r('app.media.1'))
            .width('100%')
          Image($r('app.media.2'))
            .width('100%')
          Image($r('app.media.1'))
            .width('100%')
        }
        .width('100%')
        .layoutWeight(1)
      }
      .width('100%')
      .height('100%')
      .scrollBar(BarState.On)
      .scrollBarColor(Color.Orange)
      .edgeEffect(EdgeEffect.Fade)
      Image($r('app.media.ic_jd_rocket'))
        .backgroundColor(Color.Pink)
        .width(40)
        .position({
          right:20,
          bottom:20
        })
        //创建点击事件与scroll的方法scrollEdge结合实现回到顶部
        .onClick(()=>{
          this.scroll.scrollEdge(Edge.Top)
        })
    }
    .width('100%')
    .height('100%')
  }
}

细节：

1.创建控制器： 控制器名:Scroller=new Scroller()

2.绑定控制器：Scroll(this.控制器名){}

3.调用方法：.onClick(()=>{this.控制器名.scrollEdge(Edge.Top) })

scrollEdge方法参数：

参数名参数类型参数描述
valueEdge滚动到的边缘位置。Edge.Top 顶部 Edge.Start 开头Edge.Bottom 底部 Edge.End 结尾

scroll事件：

效果目的： 当滑动超过一定距离时会出现回到顶部图标，点击回到顶部。

效果：

scroll3.gif

代码：

@Entry
@Component
struct Index {
  //创建控制器
  scroll:Scroller=new Scroller()
  //创建对距离的判断的变化
  @State isShow:boolean=false
  //为隐藏显示创建一个变量
  @State positionBottom:number=-50
  build() {
    Column(){
      //绑定控制器
      Scroll(this.scroll){
        Column(){
          Image($r('app.media.1'))
            .width('100%')
          Image($r('app.media.2'))
            .width('100%')
          Image($r('app.media.1'))
            .width('100%')
        }
        .width('100%')
        .layoutWeight(1)
      }
      .width('100%')
      .height('100%')
      .scrollBar(BarState.On)
      .scrollBarColor(Color.Orange)
      .edgeEffect(EdgeEffect.Fade)
      //创建scroll事件
      .onWillScroll(()=>{
        //获取滚动距离
        const distance=this.scroll.currentOffset().yOffset
        if (distance>200) {
          this.isShow=true
        }else {
          this.isShow=false
        }
        animateTo({
          duration:300,
          curve:Curve.Linear,
          iterations:1,
          playMode:PlayMode.Alternate
        },()=>{
          this.positionBottom=this.isShow?20:-50
        })
      })
      Image($r('app.media.ic_jd_rocket'))
        .backgroundColor(Color.Pink)
        .width(40)
        .position({
          right:20,
          bottom:this.positionBottom
        })
          //创建点击事件与scroll的方法scrollEdge结合实现回到顶部
        .onClick(()=>{
            this.scroll.scrollEdge(Edge.Top)
        })
    }
    .width('100%')
    .height('100%')
  }
}

细节：

在上方点击回到顶部的代码基础上：

1.创建两个变量，一个用来判断距离变化时的变化，一个用来决定隐藏时的位置和显示时的位置。

2.创建onWillScroll事件，通过this.控制器名.currentOffset().yOffset获取距离。

3.通过距离判定，当隐藏时图标位置放在页面外，显示时在页面指定位置。

currentOffset方法：

参数名参数类型参数描述
xOffsetnumber |string水平滑动偏移距离。
yOffsetnumber |string垂直滑动偏移距离。

onWillScroll事件：

参数名类型说明
handlerScrollOnWillScrollCallbackScroll滚动前触发的回调。

List--列表滚动组件

简述： List是一个列表组件，当List页面内容大于List设置的尺寸时会产生滚动效果。

核心用法：

文字简述：

1.List为最外层容器（相当于老板），设置其尺寸和属性。

2.ListItemGroup为分组容器（相当于组长），显示小标题。

3.ListItem为List或ListItemGroup子组件（相当于小员工），包含需要显示的内容（只能包含一个组件）。

简单实现：

效果：

list1.gif

代码：

@Entry
@Component
struct Index {
  @Builder
  Header(title:string){
    Text(title)
      .fontSize(40)
      .width('100%')
      .height(80)
      .backgroundColor(Color.Pink)
  }
  build() {
    List(){
      ListItemGroup({header:this.Header('有趣的照片'),space:10}){
        ListItem(){
          Image($r('app.media.3'))
            .width('100%')
        }
        ListItem(){
          Image($r('app.media.4'))
            .width('100%')
        }
      }
      ListItemGroup({header:this.Header('可爱的小猫'),space:10}){
        ListItem(){
          Image($r('app.media.Cat03'))
            .width('100%')
        }
        ListItem(){
          Image($r('app.media.Cat04'))
            .width('100%')
        }
      }
    }
    .width('100%')
    .height('100%')
  }
}

常用属性：

ListItemGroup(参数){}

参数名参数类型参数描述
headerCustomBuilder设置ListItemGroup头部组件。
footerCustomBuilder设置ListItemGroup尾部组件。

ListItemGroup组件属性,和 List 是一样的

名称参数类型描述
divider{strokeWidth: Length,color?:ResourceColor,startMargin?:Length,endMargin?: Length} | null用于设置ListItem分割线样式，默认无分割线。strokeWidth: 分割线的线宽。color: 分割线的颜色。startMargin： 分割线距离列表侧边起始端的距离。endMargin: 分割线距离列表侧边结束端的距离。strokeWidth, startMargin和endMargin不支持设置百分比。

粘性标题：

效果目的： 当滑动时小标题到达顶部时停留，下一个小标题到达时将替换上一个小标题。

效果：

list2.gif

代码：

@Entry
@Component
struct Index {
  //自定义小标题内容
  @Builder
  Header(title:string){
    Text(title)
      .fontSize(40)
      .width('100%')
      .height(80)
      .backgroundColor(Color.Pink)
  }
  build() {
    List(){
      ListItemGroup({header:this.Header('有趣的照片'),space:10}){
        ListItem(){
          Image($r('app.media.3'))
            .width('100%')
        }
        ListItem(){
          Image($r('app.media.4'))
            .width('100%')
        }
      }
      ListItemGroup({header:this.Header('可爱的小猫'),space:10}){
        ListItem(){
          Image($r('app.media.Cat03'))
            .width('100%')
        }
        ListItem(){
          Image($r('app.media.Cat04'))
            .width('100%')
        }
        ListItem(){
          Image($r('app.media.Cat05'))
            .width('100%')
        }
      }
    }
    .width('100%')
    .height('100%')
    .sticky(StickyStyle.Header)
  }
}

sticky属性：配合ListItemGroup

名称参数类型描述
stickyStickyStylesticky属性可以设置为 StickyStyle.Header | StickyStyle.Footer 以同时支持header吸顶和footer吸底。

List控制器和事件：

效果目的： 切换所在的城市位置。

效果：

list.gif

代码：

interface BKCityContent {
  initial: string
  cityNameList: string[]
}
@Entry
@Component
struct Index {
  //历史城市
  historyCitys: string[] = ['北京', '上海', '广州', '深圳', '重庆']
  //热门城市
  hotCitys: string[] = ['北京', '上海', '广州', '深圳', '天津', '杭州', '南京', '苏州', '成都', '武汉', '重庆', '西安', '香港', '澳门', '台北']
  //所有城市
  cityContentList: BKCityContent[] = [
    {
      initial: 'A',
      cityNameList: ['阿拉善', '鞍山', '安庆', '安阳', '阿坝', '安顺']
    },
    {
      initial: 'B',
      cityNameList: ['北京', '保定', '包头', '巴彦淖尔', '本溪', '白山']
    },
    {
      initial: 'C',
      cityNameList: ['成都', '重庆', '长春', '长沙', '承德', '沧州']
    },
    {
      initial: 'D',
      cityNameList: ['大连', '东莞', '大同', '丹东', '大庆', '大兴安岭']
    },
    {
      initial: 'E',
      cityNameList: ['鄂尔多斯', '鄂州', '恩施', '额尔古纳市', '二连浩特市', '恩施市']
    },
    {
      initial: 'F',
      cityNameList: ['福州', '佛山', '抚顺', '阜新', '阜阳', '抚州']
    },
    {
      initial: 'G',
      cityNameList: ['广州', '贵阳', '赣州', '桂林', '贵港', '广元']
    },
    {
      initial: 'H',
      cityNameList: ['杭州', '海口', '哈尔滨', '合肥', '呼和浩特', '邯郸']
    },
    {
      initial: 'J',
      cityNameList: ['济南', '晋城', '晋中', '锦州', '吉林', '鸡西']
    },
    {
      initial: 'K',
      cityNameList: ['昆明', '开封', '康定市', '昆山', '康保县', '宽城满族自治县']
    },
    {
      initial: 'L',
      cityNameList: ['兰州', '廊坊', '临汾', '吕梁', '辽阳', '辽源']
    },
    {
      initial: 'M',
      cityNameList: ['牡丹江', '马鞍山', '茂名', '梅州', '绵阳', '眉山']
    },
    {
      initial: 'N',
      cityNameList: ['南京', '宁波', '南昌', '南宁', '南通', '南平']
    },
    {
      initial: 'P',
      cityNameList: ['盘锦', '莆田', '萍乡', '平顶山', '濮阳', '攀枝花']
    },
    {
      initial: 'Q',
      cityNameList: ['青岛', '秦皇岛', '齐齐哈尔', '七台河', '衢州', '泉州']
    },
    {
      initial: 'R',
      cityNameList: ['日照', '日喀则', '饶阳县', '任丘市', '任泽区', '饶河县']
    },
    {
      initial: 'S',
      cityNameList: ['上海', '苏州', '深圳', '沈阳', '石家庄', '朔州']
    },
    {
      initial: 'T',
      cityNameList: ['天津', '太原', '唐山', '通辽', '铁岭', '通化']
    },
    {
      initial: 'W',
      cityNameList: ['无锡', '武汉', '乌海', '乌兰察布', '温州', '芜湖']
    },
    {
      initial: 'X',
      cityNameList: ['厦门', '西安', '西宁', '邢台', '忻州', '兴安盟']
    },
    {
      initial: 'Y',
      cityNameList: ['扬州', '阳泉', '运城', '营口', '延边', '伊春']
    },
    {
      initial: 'Z',
      cityNameList: ['郑州', '珠海', '张家口', '镇江', '舟山', '漳州']
    }
  ]
  //字母表
  alphabets: string[] = ['#', '热', "A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"]
  //索引
  @State myindex:number=0
  //控制器
  scroll:ListScroller=new ListScroller()
  //自定义小标题
  @Builder
  myCitys(title:string){
    Text(title)
      .width('100%')
      .fontWeight(700)
      .fontColor('#666')
      .fontSize(20)
      .padding(10)
      .backgroundColor('#ccc')
  }
  build() {
    Column(){
      //国内城市
      Row(){
        Text('国内城市')
          .fontSize(25)
          .padding(10)
          .fontWeight(700)
      }
      .width('100%')
      .justifyContent(FlexAlign.Center)
      .border({width:{bottom:1},color:'#ccc'})
      //位置
      Row(){
        Row({space:5}){
          Image($r('app.media.wx'))
            .width(15)
          Text('无法显示到当前位置')
            .fontSize(12)
        }
        Blank()
        Row({space:5}){
          Image($r('app.media.fenlei'))
            .width(15)
            .fillColor(Color.Blue)
          Text('无法显示到当前位置')
            .fontSize(12)
            .fontColor(Color.Blue)
        }
      }
      .width('100%')
      .padding(10)
      .border({width:{bottom:1},color:'#ccc'})
      Stack({alignContent:Alignment.TopEnd}){
        //绑定控制器
        List({scroller:this.scroll}){
          //历史城市
          ListItemGroup({header:this.myCitys('历史')}){
            ListItem(){
              Flex({wrap:FlexWrap.Wrap}){
                ForEach(this.historyCitys,(item:string)=>{
                  Text(item)
                    .fontSize(20)
                    .fontColor('#636363')
                    .textAlign(TextAlign.Center)
                    .width('33%')
                    .margin({bottom:20})
                })
              }
              .width('100%')
            }
          }
          //热门城市
          ListItemGroup({header:this.myCitys('热门城市')}){
            ListItem(){
              Flex({wrap:FlexWrap.Wrap}){
                ForEach(this.hotCitys,(item:string)=>{
                  Text(item)
                    .fontSize(20)
                    .fontColor('#636363')
                    .textAlign(TextAlign.Center)
                    .width('33%')
                    .margin({bottom:20})
                })
              }
              .width('100%')
            }
          }
          //字母部分
          ForEach(this.cityContentList,(item:BKCityContent)=> {
            ListItemGroup({header:this.myCitys(item.initial)}){
              ForEach(item.cityNameList,(item1:string)=>{
                ListItem(){
                  Text(item1)
                    .fontSize(20)
                    .padding(15)
                }
              })
            }
            .divider({
              strokeWidth:1,
              color:'#ccc',
              startMargin:40,
              endMargin:30
            })
          })
        }
        .width('100%')
        .divider({
          strokeWidth:1,
          color:'#ccc',
          startMargin:40,
          endMargin:30
        })
        .sticky(StickyStyle.Header)
        //创建onScrollIndex事件
        .onScrollIndex((State:number)=>{
          this.myindex=State
        })
        //右边字母部分
        AlphabetIndexer({arrayValue:this.alphabets,selected:this.myindex})
          .itemSize(26)
          .font({size:18})
          .selectedFont({size:18})
          .onSelect((index:number)=>{
            this.scroll.scrollToIndex(index)
          })
      }
      .width('100%')
      .layoutWeight(1)
    }
    .width('100%')
  }
}

细节：

需要整理城市的数据和字母表，根据基础用法自定义标题并导入数据。

1.创建控制器：控制器名:ListScroller=new ListScroller()。

2.绑定控制器： List({scroller:this.控制器名})。

3.创建onScrollIndex事件：onScrollIndex((State:number)=>{this.myindex=State})

4.AlphabetIndexer组件的用法：标题跳动跟随。------！！！用法查文档！！！

Grid--网格布局

简述： Grid是一种网格布局结构，当Grid页面内容大于Grid设置的尺寸时产生滚动效果

核心用法：

文字简述：

1.Grid网格布局最外层结构，可以设置其尺寸大小和属性。

2.GridItem为网格布局内部结构，包网格布局的内容部分（只能包含一个组件）。

简单实现：

效果：

横向滚动：

grid1.gif

纵向滚动：

grid2.gif

代码：

//横向滚动
@Entry
@Component
struct Index {
  build() {
    Grid() {
      GridItem() {
        Text("0")
      }
      .backgroundColor(Color.Red)
      .width(100)

      GridItem() {
        Text("1")
      }
      .backgroundColor(Color.Brown)
      .width(100)
      GridItem() {
        Text("2")
      }
      .backgroundColor(Color.Gray)
      .width(100)
      GridItem() {
        Text("3")
      }
      .backgroundColor(Color.Green)
      .width(100)
      GridItem() {
        Text("4")
      }
      .backgroundColor(Color.Blue)
      .width(100)
      GridItem() {
        Text("5")
      }
      .backgroundColor(Color.Brown)
      .width(100)
      GridItem() {
        Text("6")
      }
      .backgroundColor(Color.Yellow)
      .width(100)
      GridItem() {
        Text("7")
      }
      .backgroundColor(Color.Pink)
      .width(100)
      GridItem() {
        Text("8")
      }
      .backgroundColor(Color.Green)
      .width(100)
      GridItem() {
        Text("9")
      }
      .backgroundColor(Color.Orange)
      .width(100)
      GridItem() {
        Text("10")
      }
      .backgroundColor(Color.Red)
      .width(100)
      GridItem() {
        Text("11")
      }
      .backgroundColor(Color.Blue)
      .width(100)
    }
    .width('100%')
    .height(400)
    //行占比
    .rowsTemplate(' 1fr 1fr')
    //行间距
    .rowsGap(10)
    //列间距
    .columnsGap(10)
  }
}

//纵向滚动
@Entry
@Component
struct Index {
  build() {
    Grid() {
      GridItem() {
        Text("0")
      }
      .backgroundColor(Color.Red)
      .height(100)
      GridItem() {
        Text("1")
      }
      .backgroundColor(Color.Brown)
      .height(100)
      GridItem() {
        Text("2")
      }
      .backgroundColor(Color.Gray)
      .height(100)
      GridItem() {
        Text("3")
      }
      .backgroundColor(Color.Green)
      .height(100)
      GridItem() {
        Text("4")
      }
      .backgroundColor(Color.Blue)
      .height(100)
      GridItem() {
        Text("5")
      }
      .backgroundColor(Color.Brown)
      .height(100)
      GridItem() {
        Text("6")
      }
      .backgroundColor(Color.Yellow)
      .height(100)
      GridItem() {
        Text("7")
      }
      .backgroundColor(Color.Pink)
      .height(100)
      GridItem() {
        Text("8")
      }
      .backgroundColor(Color.Green)
      .height(100)
      GridItem() {
        Text("9")
      }
      .backgroundColor(Color.Orange)
      .height(100)
      GridItem() {
        Text("10")
      }
      .backgroundColor(Color.Red)
      .height(100)
      GridItem() {
        Text("11")
      }
      .backgroundColor(Color.Blue)
      .height(100)
    }
    .width('100%')
    .height(400)
    //列占比
    .columnsTemplate('1fr 1fr')
    //行间距
    .rowsGap(10)
    //列间距
    .columnsGap(10)
  }
}

细节：

1.横向滚动需要设置Grid的宽小于Grid内容的宽，并只设置Grid行占比rowsTemplate。

2.纵向滚动需要设置Grid的高小于Grid内容的高，并只设置Grid列占比columnsTemplate。

常用属性：

名称参数类型描述
columnsTemplatestring设置当前网格布局列的数量或最小列宽值，不设置时默认1列。
rowsTemplatestring设置当前网格布局行的数量或最小行高值，不设置时默认1行。
columnsGapLength设置列与列的间距。默认值：0
rowsGapLength设置行与行的间距。默认值：0

Grid控制器：

效果目的： 实现对页面进行整页切换，进行上一页下一页的切换。

效果：

grid3.gif

代码：

interface NavItem {
  title: string
  icon: ResourceStr
}
@Entry
@Component
struct Index {
  scroller:Scroller=new Scroller()
  navList: NavItem[] = [
    { title: '上新精选', icon: $r('app.media.ic_xiaomi_nav_01') },
    { title: '智能家电', icon: $r('app.media.ic_xiaomi_nav_02') },
    { title: '小米众筹', icon: $r('app.media.ic_xiaomi_nav_03') },
    { title: '有品会员', icon: $r('app.media.ic_xiaomi_nav_04') },
    { title: '有品秒杀', icon: $r('app.media.ic_xiaomi_nav_05') },
    { title: '原产地', icon: $r('app.media.ic_xiaomi_nav_06') },
    { title: '生活优选', icon: $r('app.media.ic_xiaomi_nav_07') },
    { title: '手机', icon: $r('app.media.ic_xiaomi_nav_08') },
    { title: '小米自营', icon: $r('app.media.ic_xiaomi_nav_09') },
    { title: '茅台酒饮', icon: $r('app.media.ic_xiaomi_nav_10') },
    { title: '鞋服饰品', icon: $r('app.media.ic_xiaomi_nav_11') },
    { title: '家纺餐厨', icon: $r('app.media.ic_xiaomi_nav_12') },
    { title: '食品生鲜', icon: $r('app.media.ic_xiaomi_nav_13') },
    { title: '好惠买', icon: $r('app.media.ic_xiaomi_nav_14') },
    { title: '家具家装', icon: $r('app.media.ic_xiaomi_nav_15') },
    { title: '健康养生', icon: $r('app.media.ic_xiaomi_nav_16') },
    { title: '有品海购', icon: $r('app.media.ic_xiaomi_nav_17') },
    { title: '个护清洁', icon: $r('app.media.ic_xiaomi_nav_18') },
    { title: '户外运动', icon: $r('app.media.ic_xiaomi_nav_19') },
    { title: '3C数码', icon: $r('app.media.ic_xiaomi_nav_20') }
  ]
  build() {
    Column(){
      Grid(this.scroller){
        ForEach(this.navList,(item:NavItem)=>{
          GridItem(){
            Column(){
              Image(item.icon)
                .width('90%')
              Text(item.title)
            }
            .width('100%')
          }
          .width('20%')
        })
      }
      .width('100%')
      .height(250)
      .rowsTemplate('1fr 1fr')
      Row(){
        Button('上一页')
          .onClick(()=>{
            this.scroller.scrollPage({
              next:false
            })
          })
        Button('下一页')
          .onClick(()=>{
            this.scroller.scrollPage({
              next:true
            })
          })
      }
    }
  }
}

细节：

1.创建控制器： 控制器名:Scroller=new Scroller()

2.绑定控制器：Grid(this.scroller){}

3.调用方法： this.scroller.scrollPage({next:false//下一页,next:true//上一页})

Swiper--滑动轮播组件

简述： 可以进行自动播放的滑动组件，对设置多个子组件进行进行轮播显示。

核心用法：

文字简述：

1.放一个Swiper组件，为其设置尺寸。

2.在Swiper组件内存放子组件，设置子组件的尺寸。

3.对Swiper组件设置属性。

简单实现：

效果：

Swiper.gif

代码：

@Entry
@Component
struct Index {
  build() {
    Row(){
     Swiper(){
       Image($r('app.media.Cat02'))
         .width('100%')
       Image($r('app.media.Cat03'))
         .width('100%')
       Image($r('app.media.Cat04'))
         .width('100%')
       Image($r('app.media.Cat05'))
         .width('100%')
     }
     .width('100%')
     //是否能够循环滑动
      .loop(true)
      //是否自动播放
      .autoPlay(true)
      //自动播放时间间隔
      .interval(3000)
      //是否纵向滑动
      .vertical(false)
    }
    .width('100%')
  }
}

常用属性：

属性名参数类型参数描述
loopboolean是否开启循环。设置为true时表示开启循环。默认值：true
autoPlayboolean子组件是否自动播放。默认值：false
intervalnumber使用自动播放时播放的时间间隔，单位为毫秒。默认值：3000
verticalboolean是否为纵向滑动。默认值：false

拓展：自定义滚动条

效果：

自定义滚动条.gif

代码：

interface TaoBaoItemContent {
  title: string
  icon: string
}
@Entry
@Component
struct Index {
  //数据
  contentList: TaoBaoItemContent[] = [
    { title: '淘金币', icon: 'app.media.ic_taobao_01' },
    { title: '一起摇现金', icon: 'app.media.ic_taobao_02' },
    { title: '闲鱼', icon: 'app.media.ic_taobao_03' },
    { title: '中通快递', icon: 'app.media.ic_taobao_04' },
    { title: '芭芭农场', icon: 'app.media.ic_taobao_05' },
    { title: '淘宝珍库', icon: 'app.media.ic_taobao_06' },
    { title: '阿里拍卖', icon: 'app.media.ic_taobao_07' },
    { title: '阿里药房', icon: 'app.media.ic_taobao_08' },
    { title: '小黑盒', icon: 'app.media.ic_taobao_09' },
    { title: '菜鸟', icon: 'app.media.ic_taobao_10' },
    { title: 'U先试用', icon: 'app.media.ic_taobao_11' },
    { title: '有好价', icon: 'app.media.ic_taobao_12' },
    { title: '极有家', icon: 'app.media.ic_taobao_13' },
    { title: '天猫榜单', icon: 'app.media.ic_taobao_14' },
    { title: '天天特卖', icon: 'app.media.ic_taobao_15' },
    { title: '每日好店', icon: 'app.media.ic_taobao_16' },
    { title: '全球购', icon: 'app.media.ic_taobao_17' },
    { title: '我的爱车', icon: 'app.media.ic_taobao_18' },
    { title: '造点新货', icon: 'app.media.ic_taobao_19' },
    { title: '首单优惠', icon: 'app.media.ic_taobao_20' }
  ]
  //创建控制器
  scroll:Scroller=new Scroller()
  build() {
    Column(){
      //绑定控制器
      Grid(this.scroll){
        ForEach(this.contentList,(item:TaoBaoItemContent)=>{
          GridItem(){
            Column({space:15}){
              Image($r(item.icon))
                .width('100%')
              Text(item.title)
                .fontSize(13)
            }
            .width('24%')
            .padding(10)
          }
        })
      }
      .width('100%')
      .height(220)
      .rowsTemplate('1fr 1fr')
      .scrollBar(BarState.Off)
      .backgroundColor('#ccc')
      .margin({bottom:10})
      ScrollBar({
        //调用控制器
        scroller:this.scroll,
        //设置滚动方向
        direction:ScrollBarDirection.Horizontal,
        //设置滚动条状态
        state:BarState.On
      }){
        Text()
          .width(40)
          .height(10)
          .borderRadius(5)
          .backgroundColor('#15C16D')
      }
      .width(100)
      .height(10)
      .borderRadius(5)
      .backgroundColor('#ccc')
    }
  }
}

细节：

1.关闭原本的滚动条状态。

2.创建控制器并绑定控制器。

3.自定义滚动条ScrollBar（{设置滚动条参数，调用控制器}）{滚动条内层样式}.属性--滚动条外层样式。

注意：无图片地址需要更换图片！！！！！

avatar
文章
阅读
粉丝