介紹
下拉展開圖片效果:初始時頂部圖片只顯示中間部分,其余部分,分別隱藏在屏幕上邊緣和時間軸模塊下方,隨著下拉,圖片會逐漸展開。
時間軸效果:位于左邊,虛線貫穿整個List,每個內容模塊前都有一個時間軸節點。
效果預覽圖
使用說明
- 點擊向下拖動,頂部背景,上方和下方會分別從屏幕上邊緣以及時間軸模塊下方,逐漸顯示出來。
實現思路
- 下拉刷新效果:通過 PullToRefresh 組件實現,通過onAreaChange接口計算圖片下拉高度,使圖片下拉高度為List下拉高度的1/2,下拉高度存在差值時,圖片便會逐漸顯示完整。
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) // 必須設置列表為滑動到邊緣無效果
}
- 時間軸效果:時間軸部分:通過設置Column的bordier屬性,只設置左邊框實現。時間軸節點:樣式通過設置borderRadius屬性實現,位置通過設置margin的top實現偏移顯示。
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 // 視圖層-下拉展開圖片和時間軸效果實現案例
寫在最后
- 如果你覺得這篇內容對你還蠻有幫助,我想邀請你幫我三個小忙:
- 點贊,轉發,有你們的 『點贊和評論』,才是我創造的動力。
- 關注小編,同時可以期待后續文章ing??,不定期分享原創知識。
- 想要獲取更多完整鴻蒙最新學習知識點,請移步前往小編:
https://gitee.com/MNxiaona/733GH/blob/master/jianshu