鸿蒙开发 ——UI开发之RecyclerViewPager_【openharmony】鸿蒙 ui开发之recyclerviewpager-优快云博客

本文链接：https://blog.youkuaiyun.com/guangxishaoji/article/details/146610733

📑往期推文全新看点（文中附带最新·鸿蒙全栈学习笔记）

✒️ 鸿蒙（HarmonyOS）北向开发知识点记录~

✒️ 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~

✒️ 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

✒️ 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

✒️ 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

✒️ 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

✒️ 记录一场鸿蒙开发岗位面试经历~

✒️ 持续更新中……

简介

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

下载安装

ohpm install @ohos/recyclerviewpager

使用说明

singleFlingPager的使用

导入

  import { singleFlingPager } from "@ohos/recyclerviewpager"

传入自定义布局

自定义方法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%'})
       }
       }

将布局传入容器内

   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的使用

导入

  import { verticalViewPager } from "@ohos/recyclerviewpager"

传入自定义布局

自定义方法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
     })
   }

 }

将布局传入容器内

   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)
         }
       })
     }
   }
 }

singleFlingPagerSelect的使用

导入

  import { singleFlingPagerSelect } from "@ohos/recyclerviewpager"

传入自定义布局

自定义方法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
     })
   }

 }

将布局传入容器内

   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  # 安装使用方法