【OpenHarmony】 鸿蒙 UI开发之RecyclerViewPager

塞尔维亚大汉
168 阅读3分钟

简介

RecyclerViewPager是一个支持自定义左右翻页切换效果、上下翻页切换效果、类似Material风格的容器组件。

下载安装

ohpm install @ohos/recyclerviewpager

使用说明

singleFlingPager的使用

  1. 导入
  import { singleFlingPager } from "@ohos/recyclerviewpager"

2. 传入自定义布局

自定义方法specificParam中传入自己的自定义布局
       @Builder specificParam(item) {

       if (item.i == this.index) {
       Flex() {
       Text("item=" + item.i).fontSize(this.fontSize).fontColor("#e5e1e1")
       }
       .margin({ left: this.marginLeft, right: this.marginRight })
       .width(this.Containderwidth)
       .height('90%')
       .backgroundColor("#273238")
       .scale({
       x: 1,
       y: this.offsetX < 0 ? 1 + this.offsetX / this.ScreenOffset : 1 - this.offsetX / this.ScreenOffset
       })
       .offset({x:'1%'})
       } else {
       Flex() {
       Text("item").fontSize(this.fontSize).fontColor("#e5e1e1")
       }
       .margin({ left: this.marginLeft, right: this.marginRight })
       .width(this.Containderwidth)
       .height('80%')
       .backgroundColor("#273238")
       .scale({
       x: 1,
       y: this.offsetX < 0 ? 1 - this.offsetX / this.ScreenOffset : 1 + this.offsetX / this.ScreenOffset
       })
       .offset({x:'1%'})
       }
       }

3. 将布局传入容器内

   build() {
   Column() {
     Flex({ direction: FlexDirection.Column }) {
       singleFlingPager(
         {
           arr: this.arr,
           offsetX: this.offsetX!!,
           index: this.index!!,
           marginLeft: this.marginLeft,
           marginRight: this.marginRight,
           Containderwidth: this.Containderwidth,
           ContainderHeight: this.ContainderHeight,
           content: (item) => {
             this.specificParam(item)
           }
         }
       )
     }
   }
 }

verticalViewPager的使用

  1. 导入
  import { verticalViewPager } from "@ohos/recyclerviewpager"

2. 传入自定义布局

自定义方法specificParam中传入自己的自定义布局
   @Builder specificParam(item) {

   if (item.i == this.index) {
     Flex() {
       Text("item=" + this.index).fontSize(this.fontSize).fontColor("#e5e1e1")
     }
     .margin({ top: this.topSpaced, bottom: this.topSpaced /*, left: this.topSpaced, right: this.topSpaced */
     })
     .width('100%')
     .height(this.ContainderHeight)
     .backgroundColor("#273238")
     .scale({
       x: this.offsetY < 0 ? 1 + this.offsetY / this.ScreenOffset : 1 - this.offsetY / this.ScreenOffset,
       y: 1
     })
   } else {
     Flex() {
       Text("item").fontSize(this.fontSize).fontColor("#e5e1e1")
     }
     .margin({ top: this.topSpaced, bottom: this.topSpaced, left: this.topSpaced, right: this.topSpaced })
     .width('90%')
     .height(this.ContainderHeight)
     .backgroundColor("#273238")
     .scale({
       x: this.offsetY < 0 ? 1 - this.offsetY / this.ScreenOffset : 1 + this.offsetY / this.ScreenOffset,
       y: 1
     })
   }

 }

3. 将布局传入容器内

   build() {
   Column() {
     Flex() {
       verticalViewPager({
         arr: this.arr,
         offsetY: this.offsetY!!,
         index: this.index!!,
         marginTop: this.topSpaced,
         marginBottom: this.topSpaced,
         ContainderWidth: this.ContainderWidth,
         ContainderHeight: this.ContainderHeight,
         content: (item) => {
           this.specificParam(item)
         }
       })
     }
   }
 }

DD一下： 鸿蒙开发各类文档，也可关注公众号<程序猿百晓生>获取。

1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题（含参考答案） 
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......

singleFlingPagerSelect的使用

  1. 导入
  import { singleFlingPagerSelect } from "@ohos/recyclerviewpager"

2. 传入自定义布局

自定义方法specificParam中传入自己的自定义布局
@Builder specificParam(item) {

   if (item.i == this.index) {
     Flex() {
       Text("item=" + item.i).fontSize(this.fontSize).fontColor("#e5e1e1")
     }
     .margin({ left: this.marginLeft,right: this.marginRight })
     .width(this.Containderwidth)
     .height('90%')
     .backgroundColor("#273238")
     .scale({
       x: 1,
       y: this.offsetX < 0 ? 1 + this.offsetX / this.ScreenOffset : 1 - this.offsetX / this.ScreenOffset
     })
   } else {
     Flex() {
       Text("item").fontSize(this.fontSize).fontColor("#e5e1e1")
     }
     .margin({ left: this.marginLeft,right: this.marginRight })
     .width(this.Containderwidth)
     .height('80%')
     .backgroundColor("#273238")
     .scale({
       x: 1,
       y: this.offsetX < 0 ? 1 - this.offsetX / this.ScreenOffset : 1 + this.offsetX / this.ScreenOffset
     })
   }

 }

3. 将布局传入容器内

   build() {
     Flex() {
       singleFlingPagerSelect({
         arr: this.arr,
         offsetX: this.offsetX!!,
         index: this.index!!,
         marginLeft: this.marginLeft,
         marginRight: this.marginRight,
         Containderwidth: this.Containderwidth,
         ContainderHeight: this.ContainderHeight,
         content: (item) => {
           this.specificParam(item)
         }
       })
     )}
   }

属性说明

singleFlingPager属性说明

arr: 页面文本内容,
offsetX: 页面滑动偏移,
index: 当前页面索引值,
marginLeft: 页面左边距,
marginRight: 页面右边距,
Containderwidth: 页面宽度
ContainderHeight: 页面高度
content: 容器内布局

verticalViewPager属性说明

arr: 页面文本内容,
offsetY: 页面滑动偏移,
index: 当前页面索引值,
marginTop: 页面顶边距,
marginBottomt: 页面下边距,
ContainderWidth: 页面宽度,
ContainderHeight: 页面高度,
content: 容器内布局

singleFlingPagerSelect属性说明

arr: 页面文本内容,
offsetX: 页面滑动偏移,
index: 当前页面索引值,
marginLeft: 页面左边距,
marginRight: 页面右边距,
Containderwidth: 页面宽度
ContainderHeight: 页面高度
content: 容器内布局

约束与限制

在下述版本验证通过：

  • DevEco Studio: NEXT Beta1-5.0.3.806,SDK:API12 Release(5.0.0.66)
  • DevEco Studio 版本： DevEco Studio NEXT Developer Beta3(5.0.3.521)
  • OpenHarmony SDK: API12 (5.0.0.25)

目录结构

|---- RecyclerViewPager 
|     |---- entry  # 示例代码文件夹
|     |---- library  # RecyclerViewPager库文件夹
|         |----src
|             |----main
|                     |----components
|                         |----materialContainderTop.ets #material风格实现
|                         |----verticalViewPager.ets #上下翻页效果实现
|         |---- index.ets  # 对外接口
|     |---- README.md  # 安装使用方法
avatar
文章
阅读
粉丝