代码拉取完成,页面将自动刷新
RecyclerViewPager是一个支持自定义左右翻页切换效果、上下翻页切换效果、类似Material风格的容器组件。
ohpm install @ohos/recyclerviewpager
OpenHarmony ohpm 环境配置等更多内容,请参考如何安装 OpenHarmony ohpm包
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: $offsetX,
index: $index,
marginLeft: this.marginLeft,
marginRight: this.marginRight,
Containderwidth: this.Containderwidth,
ContainderHeight: this.ContainderHeight,
content: (item) => {
this.specificParam(item)
}
}
)
}
}
}
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: $offsetY,
index: $index,
marginTop: this.topSpaced,
marginBottom: this.topSpaced,
ContainderWidth: this.ContainderWidth,
ContainderHeight: this.ContainderHeight,
content: (item) => {
this.specificParam(item)
}
})
}
}
}
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: $offsetX,
index: $index,
marginLeft: this.marginLeft,
marginRight: this.marginRight,
Containderwidth: this.Containderwidth,
ContainderHeight: this.ContainderHeight,
content: (item) => {
this.specificParam(item)
}
})
)}
}
arr: 页面文本内容,
offsetX: 页面滑动偏移,
index: 当前页面索引值,
marginLeft: 页面左边距,
marginRight: 页面右边距,
Containderwidth: 页面宽度
ContainderHeight: 页面高度
content: 容器内布局
arr: 页面文本内容,
offsetY: 页面滑动偏移,
index: 当前页面索引值,
marginTop: 页面顶边距,
marginBottomt: 页面下边距,
ContainderWidth: 页面宽度,
ContainderHeight: 页面高度,
content: 容器内布局
arr: 页面文本内容,
offsetX: 页面滑动偏移,
index: 当前页面索引值,
marginLeft: 页面左边距,
marginRight: 页面右边距,
Containderwidth: 页面宽度
ContainderHeight: 页面高度
content: 容器内布局
在下述版本验证通过:
|---- RecyclerViewPager
| |---- entry # 示例代码文件夹
| |---- library # RecyclerViewPager库文件夹
| |----src
| |----main
| |----components
| |----materialContainderTop.ets #material风格实现
| |----verticalViewPager.ets #上下翻页效果实现
| |---- index.ets # 对外接口
| |---- README.md # 安装使用方法
使用过程中发现任何问题都可以提 Issue 给我们,当然,我们也非常欢迎你给我们发 PR 。
本项目基于 Apache License 2.0 ,请自由地享受和参与开源。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。