代码拉取完成,页面将自动刷新
下拉展开图片效果:初始时顶部图片只显示中间部分,其余部分,分别隐藏在屏幕上边缘和时间轴模块下方,随着下拉,图片会逐渐展开。 时间轴效果:位于左边,虚线贯穿整个List,每个内容模块前都有一个时间轴节点。
使用说明
PullToRefresh({
customList: () => {
// 一个用@Builder修饰过的UI方法
this.getListView();
},
})
.onAreaChange((oldValue, newValue)=>{
// TODO 知识点:PullToRefresh组件会铺满整改屏幕,通过onAreaChange获取到的区域高度就是屏幕高度
// TODO 知识点:并且PullToRefresh组件不会随着上拉或下拉变化,该接口只会回调一次,此处不存在频繁回调造成的性能问题
this.windowHeight = (newValue.height as number);
})
@Builder
private getListView() {
List({ scroller: this.scroller })
.onScroll((scrollOffset: number)=>{
// 获取List上滑的高度,控制图片上滑的高度
this.imgMarginTop -= scrollOffset;
})
.onAreaChange((oldValue, newValue)=>{
// TODO 知识点: 通过onAreaChange获取到List的区域高度,与屏幕高度计算差值,得到下拉高度,除以高度基数,表明图片变化的高度是下拉高度的1/2
this.refreshPullDownHeight =(this.windowHeight - (newValue.height as number))/this.pullDownHeightRadix;
})
.scrollBar(BarState.Off)
.edgeEffect(EdgeEffect.None) // 必须设置列表为滑动到边缘无效果
}
Row() {
Column() {
// 时间轴节点
Column()
.width($r('app.integer.width_and_height_ten'))
.height($r('app.integer.width_and_height_ten'))
.backgroundColor($r('app.color.time_node_color'))
.borderRadius($r('app.integer.borderRadius_fifty'))
.margin({top:$r('app.integer.margin_top_five')})
// 时间轴
Column()
.width($r('app.integer.width_and_height_zero'))
.height($r('app.integer.width_and_height_one_hundred'))
.margin({top:$r('app.integer.margin_top_five')})
.border({
width: { left: $r('app.string.time_line_width')},
color: { left: $r('app.color.time_line_color')},
style: { left: BorderStyle.Dotted}
})
}
.margin({left:$r('app.integer.margin_left_twenty')})
// 内容区域
Column() {
Text(time)
.fontSize($r('app.integer.font_size_fourteen'))
.width($r('app.string.one_hundred_percent'))
.height($r('app.integer.width_and_height_twenty'))
.margin({
left: $r('app.integer.margin_left_ten'),
top: $r('app.integer.margin_top_five'),
bottom: $r('app.integer.margin_bottom_five')
})
Text(text)
.width($r('app.string.one_hundred_percent'))
.margin({left:$r('app.integer.margin_left_ten'), top:$r('app.integer.margin_top_five')})
.fontSize($r('app.integer.font_size_sixteen'))
}
.width($r('app.string.eighty_four_percent'))
.height($r('app.integer.width_and_height_one_hundred_and_twenty'))
.borderRadius($r('app.integer.borderRadius_ten'))
.margin({
left: $r('app.integer.margin_left_twelve'),
top: $r('app.integer.margin_top_fifteen'),
bottom: $r('app.integer.margin_bottom_five')
})
.backgroundColor(Color.White)
}
.width($r('app.string.one_hundred_percent'))
.backgroundColor($r('app.color.time_line_mode_back_color'))
本示例使用了onScroll回调监听接口,此接口属于频繁回调接口,应该避免在内部进行冗余和耗时操作,例如避免打印日志。
onAreaChange回调监听接口: 组件位置变化时,每一帧都会触发回调,同样属于频繁回调接口,内部同样需要避免打印日志等耗时操作
refreshtimeline // har类型
|---view
| |---RefreshTimeLine.ets // 视图层-下拉展开图片和时间轴效果实现案例
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。