未验证 提交 d2580cd1 编写于 作者: O openharmony_ci 提交者: Gitee

!20753 滚动类组件Grid、List、Scroll、WaterFlow添加friction属性

Merge pull request !20753 from 李鲲辉/master
...@@ -63,6 +63,7 @@ Grid(scroller?: Scroller) ...@@ -63,6 +63,7 @@ Grid(scroller?: Scroller)
| edgeEffect<sup>10+</sup> | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置组件的滑动效果,支持弹簧效果和阴影效果。<br/>默认值:EdgeEffect.None<br/> | | edgeEffect<sup>10+</sup> | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置组件的滑动效果,支持弹簧效果和阴影效果。<br/>默认值:EdgeEffect.None<br/> |
| enableScrollInteraction<sup>10+</sup> | boolean | 设置是否支持滚动手势,当设置为false时,无法通过手指或者鼠标滚动,但不影响控制器的滚动接口。<br/>默认值:true | | enableScrollInteraction<sup>10+</sup> | boolean | 设置是否支持滚动手势,当设置为false时,无法通过手指或者鼠标滚动,但不影响控制器的滚动接口。<br/>默认值:true |
| nestedScroll<sup>10+</sup> | [NestedScrollOptions](ts-container-scroll.md#nestedscrolloptions10对象说明) | 嵌套滚动选项。设置向前向后两个方向上的嵌套滚动模式,实现与父组件的滚动联动。 | | nestedScroll<sup>10+</sup> | [NestedScrollOptions](ts-container-scroll.md#nestedscrolloptions10对象说明) | 嵌套滚动选项。设置向前向后两个方向上的嵌套滚动模式,实现与父组件的滚动联动。 |
| friction<sup>10+</sup> | number \| [Resource](ts-types.md#resource) | 设置摩擦系数,手动划动滚动区域时生效,只对惯性滚动过程有影响,对惯性滚动过程中的链式效果有间接影响。<br/>默认值:非可穿戴设备为0.6,可穿戴设备为0.9<br/>**说明:** <br/>设置为小于等于0的值时,按默认值处理 |
Grid组件根据rowsTemplate、columnsTemplate属性的设置情况,可分为以下三种布局模式: Grid组件根据rowsTemplate、columnsTemplate属性的设置情况,可分为以下三种布局模式:
...@@ -186,6 +187,7 @@ struct GridExample { ...@@ -186,6 +187,7 @@ struct GridExample {
.columnsTemplate('1fr 1fr 1fr 1fr 1fr') .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
.columnsGap(10) .columnsGap(10)
.rowsGap(10) .rowsGap(10)
.friction(0.6)
.edgeEffect(EdgeEffect.Spring) .edgeEffect(EdgeEffect.Spring)
.scrollBar(BarState.On) .scrollBar(BarState.On)
.onScrollIndex((first: number) => { .onScrollIndex((first: number) => {
......
...@@ -66,6 +66,7 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller? ...@@ -66,6 +66,7 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller?
| scrollSnapAlign<sup>10+</sup> | [ScrollSnapAlign](#scrollsnapalign10枚举说明) | 设置列表项滚动结束对齐效果。<br/>默认值:ScrollSnapAlign.NONE<br/>**说明:**<br/>只支持ListItem等高情况下,设置列表项滚动结束对齐效果。 | | scrollSnapAlign<sup>10+</sup> | [ScrollSnapAlign](#scrollsnapalign10枚举说明) | 设置列表项滚动结束对齐效果。<br/>默认值:ScrollSnapAlign.NONE<br/>**说明:**<br/>只支持ListItem等高情况下,设置列表项滚动结束对齐效果。 |
| enableScrollInteraction<sup>10+</sup> | boolean | 设置是否支持滚动手势,当设置为false时,无法通过手指或者鼠标滚动,但不影响控制器的滚动接口。<br/>默认值:true | | enableScrollInteraction<sup>10+</sup> | boolean | 设置是否支持滚动手势,当设置为false时,无法通过手指或者鼠标滚动,但不影响控制器的滚动接口。<br/>默认值:true |
| nestedScroll<sup>10+</sup> | [NestedScrollOptions](ts-container-scroll.md#nestedscrolloptions10对象说明) | 嵌套滚动选项。设置向前向后两个方向上的嵌套滚动模式,实现与父组件的滚动联动。 | | nestedScroll<sup>10+</sup> | [NestedScrollOptions](ts-container-scroll.md#nestedscrolloptions10对象说明) | 嵌套滚动选项。设置向前向后两个方向上的嵌套滚动模式,实现与父组件的滚动联动。 |
| friction<sup>10+</sup> | number \| [Resource](ts-types.md#resource) | 设置摩擦系数,手动划动滚动区域时生效,只对惯性滚动过程有影响,对惯性滚动过程中的链式效果有间接影响。<br/>默认值:非可穿戴设备为0.6,可穿戴设备为0.9<br/>**说明:** <br/>设置为小于等于0的值时,按默认值处理 |
## ListItemAlign<sup>9+</sup>枚举说明 ## ListItemAlign<sup>9+</sup>枚举说明
...@@ -213,6 +214,7 @@ struct ListExample { ...@@ -213,6 +214,7 @@ struct ListExample {
} }
.listDirection(Axis.Vertical) // 排列方向 .listDirection(Axis.Vertical) // 排列方向
.scrollBar(BarState.Off) .scrollBar(BarState.Off)
.friction(0.6)
.divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线 .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
.edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring
.onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => { .onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => {
...@@ -264,6 +266,7 @@ struct ListLanesExample { ...@@ -264,6 +266,7 @@ struct ListLanesExample {
} }
.height(300) .height(300)
.width("90%") .width("90%")
.friction(0.6)
.border({ width: 3, color: Color.Red }) .border({ width: 3, color: Color.Red })
.lanes({ minLength: 40, maxLength: 40 }) .lanes({ minLength: 40, maxLength: 40 })
.alignListItem(this.alignListItem) .alignListItem(this.alignListItem)
...@@ -327,6 +330,7 @@ struct ListExample{ ...@@ -327,6 +330,7 @@ struct ListExample{
}, item => item) }, item => item)
}.width('90%') }.width('90%')
.scrollBar(BarState.Off) .scrollBar(BarState.Off)
.friction(0.6)
}.width('100%') }.width('100%')
Button('edit list') Button('edit list')
......
...@@ -37,6 +37,7 @@ Scroll(scroller?: Scroller) ...@@ -37,6 +37,7 @@ Scroll(scroller?: Scroller)
| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置滑动效果,目前支持的滑动效果参见EdgeEffect的枚举说明。<br/>默认值:EdgeEffect.None | | edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置滑动效果,目前支持的滑动效果参见EdgeEffect的枚举说明。<br/>默认值:EdgeEffect.None |
| enableScrollInteraction<sup>10+</sup> | boolean | 设置是否支持滚动手势,当设置为false时,无法通过手指或者鼠标滚动,但不影响控制器的滚动接口。<br/>默认值:true | | enableScrollInteraction<sup>10+</sup> | boolean | 设置是否支持滚动手势,当设置为false时,无法通过手指或者鼠标滚动,但不影响控制器的滚动接口。<br/>默认值:true |
| nestedScroll<sup>10+</sup> | [NestedScrollOptions](#nestedscrolloptions10对象说明) | 嵌套滚动选项。设置向前向后两个方向上的嵌套滚动模式,实现与父组件的滚动联动。 | | nestedScroll<sup>10+</sup> | [NestedScrollOptions](#nestedscrolloptions10对象说明) | 嵌套滚动选项。设置向前向后两个方向上的嵌套滚动模式,实现与父组件的滚动联动。 |
| friction<sup>10+</sup> | number \| [Resource](ts-types.md#resource) | 设置摩擦系数,手动划动滚动区域时生效,只对惯性滚动过程有影响,对惯性滚动过程中的链式效果有间接影响。<br/>默认值:非可穿戴设备为0.6,可穿戴设备为0.9<br/>**说明:** <br/>设置为小于等于0的值时,按默认值处理 |
## ScrollDirection枚举说明 ## ScrollDirection枚举说明
| 名称 | 描述 | | 名称 | 描述 |
...@@ -243,6 +244,7 @@ struct ScrollExample { ...@@ -243,6 +244,7 @@ struct ScrollExample {
.scrollBar(BarState.On) // 滚动条常驻显示 .scrollBar(BarState.On) // 滚动条常驻显示
.scrollBarColor(Color.Gray) // 滚动条颜色 .scrollBarColor(Color.Gray) // 滚动条颜色
.scrollBarWidth(10) // 滚动条宽度 .scrollBarWidth(10) // 滚动条宽度
.friction(0.6)
.edgeEffect(EdgeEffect.None) .edgeEffect(EdgeEffect.None)
.onScroll((xOffset: number, yOffset: number) => { .onScroll((xOffset: number, yOffset: number) => {
console.info(xOffset + ' ' + yOffset) console.info(xOffset + ' ' + yOffset)
...@@ -325,6 +327,7 @@ struct NestedScroll { ...@@ -325,6 +327,7 @@ struct NestedScroll {
.width("100%") .width("100%")
.height("50%") .height("50%")
.edgeEffect(EdgeEffect.None) .edgeEffect(EdgeEffect.None)
.friction(0.6)
.onReachStart(() => { .onReachStart(() => {
this.listPosition = 0 this.listPosition = 0
}) })
...@@ -399,6 +402,7 @@ struct StickyNestedScroll { ...@@ -399,6 +402,7 @@ struct StickyNestedScroll {
}.width("100%") }.width("100%")
} }
.edgeEffect(EdgeEffect.Spring) .edgeEffect(EdgeEffect.Spring)
.friction(0.6)
.backgroundColor('#DCDCDC') .backgroundColor('#DCDCDC')
.scrollBar(BarState.Off) .scrollBar(BarState.Off)
.width('100%') .width('100%')
......
...@@ -46,6 +46,7 @@ WaterFlow(options?: {footer?: CustomBuilder, scroller?: Scroller}) ...@@ -46,6 +46,7 @@ WaterFlow(options?: {footer?: CustomBuilder, scroller?: Scroller})
| layoutDirection | [FlexDirection](ts-appendix-enums.md#flexdirection) |设置布局的主轴方向。<br/>默认值:FlexDirection.Column| | layoutDirection | [FlexDirection](ts-appendix-enums.md#flexdirection) |设置布局的主轴方向。<br/>默认值:FlexDirection.Column|
| enableScrollInteraction<sup>10+</sup> | boolean | 设置是否支持滚动手势,当设置为false时,无法通过手指或者鼠标滚动,但不影响控制器的滚动接口。<br/>默认值:true | | enableScrollInteraction<sup>10+</sup> | boolean | 设置是否支持滚动手势,当设置为false时,无法通过手指或者鼠标滚动,但不影响控制器的滚动接口。<br/>默认值:true |
| nestedScroll<sup>10+</sup> | [NestedScrollOptions](ts-container-scroll.md#nestedscrolloptions10对象说明) | 嵌套滚动选项。设置向前向后两个方向上的嵌套滚动模式,实现与父组件的滚动联动。 | | nestedScroll<sup>10+</sup> | [NestedScrollOptions](ts-container-scroll.md#nestedscrolloptions10对象说明) | 嵌套滚动选项。设置向前向后两个方向上的嵌套滚动模式,实现与父组件的滚动联动。 |
| friction<sup>10+</sup> | number \| [Resource](ts-types.md#resource) | 设置摩擦系数,手动划动滚动区域时生效,只对惯性滚动过程有影响,对惯性滚动过程中的链式效果有间接影响。<br/>默认值:非可穿戴设备为0.6,可穿戴设备为0.9<br/>**说明:** <br/>设置为小于等于0的值时,按默认值处理 |
layoutDirection优先级高于rowsTemplate和columnsTemplate。根据layoutDirection设置情况,分为以下三种设置模式: layoutDirection优先级高于rowsTemplate和columnsTemplate。根据layoutDirection设置情况,分为以下三种设置模式:
...@@ -278,6 +279,7 @@ struct WaterflowDemo { ...@@ -278,6 +279,7 @@ struct WaterflowDemo {
minHeight: 0, minHeight: 0,
maxHeight: '100%' maxHeight: '100%'
}) })
.friction(0.6)
.columnsGap(10) .columnsGap(10)
.rowsGap(5) .rowsGap(5)
.onReachStart(() => { .onReachStart(() => {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册