# RecyclerViewPager

**Repository Path**: wugitrep/RecyclerViewPager

## Basic Information

- **Project Name**: RecyclerViewPager
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 15
- **Created**: 2023-04-14
- **Last Updated**: 2023-04-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

 # RecyclerViewPager

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

 ![效果展示](screenshot/RecyclerViewpager.gif)


## 下载安装
```shell
npm install @ohos/recyclerviewpager --save
```
OpenHarmony npm环境配置等更多内容，请参考 [如何安装OpenHarmony npm包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_npm_usage.md) 。


## 使用说明

### singleFlingPager的使用
1. 导入
 ```xml
   import { singleFlingPager } from "@ohos/recyclerviewpager"
 ```

2. 传入自定义布局
 ```xml 
 自定义方法specificParam中传入自己的自定义布局
@Builder specificParam(item, index, offsetX) {

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

3. 将布局传入容器内
 ```xml
    build() {
        Flex() {
           singleFlingPager(
           {
              arr: this.arr,
              index: this.index,
              marginLeft: this.marginLeft,
              marginRight: this.marginRight,
              Containderwidth: this.Containderwidth,
              ContainderHeight: this.ContainderHeight,
              content: (item, index, offsetX)=> {this.specificParam(item, index, offsetX)}
           }
        )}
    }
 ```

### verticalViewPager的使用
1. 导入
 ```xml
   import { verticalViewPager } from "@ohos/recyclerviewpager"
 ```

2. 传入自定义布局
 ```xml 
 自定义方法specificParam中传入自己的自定义布局
    @Builder specificParam(item, index, offsetY) {

    if (item.i == index) {
      Flex() {
        Text("item=" + 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: offsetY < 0 ? 1 + offsetY / this.ScreenOffset : 1 - 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: offsetY < 0 ? 1 - offsetY / this.ScreenOffset : 1 + offsetY / this.ScreenOffset,
        y:1
      })
    }
 ```


3. 将布局传入容器内
 ```xml
    build() {
        Flex() {
            verticalViewPager({
                arr: this.arr,
                index: this.index,
                marginTop: this.topSpaced,
                marginBottom: this.topSpaced,
                ContainderWidth: this.ContainderWidth,
                ContainderHeight: this.ContainderHeight,
                content: (item, index, offsetY)=> {this.specificParam(item, index, offsetY)}
            })
        )}
    }
 ```

### singleFlingPagerSelect的使用
1. 导入
 ```xml
   import { singleFlingPagerSelect } from "@ohos/recyclerviewpager"
 ```

2. 传入自定义布局
 ```xml 
 自定义方法specificParam中传入自己的自定义布局
@Builder specificParam(item, index, offsetX) {

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


3. 将布局传入容器内
 ```xml
    build() {
        Flex() {
            singleFlingPagerSelect({
                arr: this.arr,
                index: $index,
                marginLeft: this.marginLeft,
                marginRight: this.marginRight,
                Containderwidth: this.Containderwidth,
                ContainderHeight: this.ContainderHeight,
                content: (item, index, offsetX)=> {this.specificParam(item, index, offsetX)}
            })
        )}
    }
 ```


## 属性说明

### singleFlingPager属性说明
```xml 
arr: 页面文本内容,
index: 当前页面索引值,
marginLeft: 页面左边距,
marginRight: 页面右边距,
Containderwidth: 页面宽度
ContainderHeight: 页面高度
content: 容器内布局
```

### verticalViewPager属性说明
```xml 
arr: 页面文本内容,
index: 当前页面索引值,
marginTop: 页面顶边距,
marginBottomt: 页面下边距,
ContainderWidth: 页面宽度,
ContainderHeight: 页面高度,
content: 容器内布局
```

### singleFlingPagerSelect属性说明
```xml 
arr: 页面文本内容,
index: 当前页面索引值,
marginLeft: 页面左边距,
marginRight: 页面右边距,
Containderwidth: 页面宽度
ContainderHeight: 页面高度
content: 容器内布局
```


## 约束与限制

在下述版本验证通过：

DevEco Studio 版本：3.1 Beta1(3.1.0.200)，SDK:API9 Beta5(3.2.10.6)

## 目录结构
````
|---- RecyclerViewPager 
|     |---- entry  # 示例代码文件夹
|     |---- RecyclerViewPager  # RecyclerViewPager库文件夹
|         |----src
|             |----main
|                     |----components
|                         |----materialContainderTop.ets #material风格实现
|                         |----verticalViewPager.ets #上下翻页效果实现
|         |---- index.ets  # 对外接口
|     |---- README.md  # 安装使用方法                
````

## 贡献代码
使用过程中发现任何问题都可以提 [Issue](https://gitee.com/openharmony-sig/RecyclerViewPager/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/openharmony-sig/RecyclerViewPager/pulls) 。

## 开源协议
本项目基于 [Apache License 2.0](https://gitee.com/openharmony-sig/RecyclerViewPager/blob/master/LICENSE) ，请自由地享受和参与开源。