代码拉取完成,页面将自动刷新
本示例介绍运用Stack组件以构建多层次堆叠的视觉效果。通过绑定Scroll组件的onScroll滚动事件回调函数,精准捕获滚动动作的发生。当滚动时,实时地调节组件的透明度、高度等属性,从而成功实现了嵌套滚动效果、透明度动态变化以及平滑的组件切换。
使用说明
Stack({ alignContent: Alignment.Top }) {
Scroll(this.scroller) {
...
}
}
Scroll(this.scroller) {
Column() {
...
}
}
.onScroll(() => {
let yOffset: number = this.scroller2.currentOffset().yOffset;
this.Height2 = this.Height2_raw - yOffset * 0.5;
// 根据yOffset的偏移量来设置IconList2的透明度,当偏移量大于等于IconList2原始高度就是透明的。
if (1 - yOffset / this.IconList2_raw >= 0) {
this.Opacity2 = 1 - yOffset / this.IconList2_raw; // IconList2的透明度
} else {
this.Opacity2 = 0;
}
// 巧妙利用IconList2的透明度的值Opacity2来设置IconList2的缩放。
this.ratio = this.Opacity2;
// 根据yOffset的偏移量来设置IconList1的透明度和IconList3的间距,当偏移量大于等于IconList1原始高度就是透明的同时IconList3的间距也是最小的。
if (1 - yOffset / this.IconList1_raw > 0) {
this.isChange = false;
this.Opacity = 1 - yOffset / this.IconList1_raw; // IconList1的透明度
this.marginSpace = this.maxMarginSpace; // IconList3默认间距
} else {
this.isChange = true;
this.Opacity = (yOffset - this.IconList1_raw) / this.maxMarginSpace; // IconList1的透明度
this.marginSpace = this.IconList3_raw - yOffset > this.minMarginSpace ?
(this.IconList3_raw - yOffset) : this.minMarginSpace; // IconList3的间距
}
})
Scroll(this.scroller2){
...
}
.width('100%')
.scrollBar(BarState.Off)
.nestedScroll({
scrollForward: NestedScrollMode.PARENT_FIRST, // 可滚动组件往末尾端滚动时的嵌套滚动选项,父组件先滚动,父组件滚动到边缘以后自身滚动。
scrollBackward: NestedScrollMode.SELF_FIRST // 可滚动组件往起始端滚动时的嵌套滚动选项,自身先滚动,自身滚动到边缘以后父组件滚动。
})
WaterFlow() {
LazyForEach(this.productData, (item: ProductDataModel) => {
FlowItem() {
...
}, (item: ProductDataModel) => item.id.toString())
}
.nestedScroll({
scrollForward: NestedScrollMode.PARENT_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST
})
.columnsTemplate("1fr 1fr")
}
本示例使用了LazyForEach进行数据懒加载,WaterFlow布局时会根据可视区域按需创建FlowItem组件,并在FlowItem滑出可视区域外时销毁以降低内存占用。 本例中Scroll组件绑定onScroll滚动事件回调,onScroll属于频繁回调,在回调中需要尽量减少耗时和冗余操作,例如减少不必要的日志打印。
componentstack // har类型
|---mock
| |---IconMock.ets // 本地数据源
|---model
| |---DataSource.ets // 列表数据模型
| |---IconModel.ets // 数据类型定义
|---view
| |---ComponentStack.ets // 组件堆叠主页面
| |---IconView.ets // 按钮快捷入口自定义组件
| |---ProductList.ets // 商品列表自定义组件
本实例依赖common模块来实现资源的调用。 还需要依赖EntryAbility.ets模块。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。