介紹

下拉展開圖片效果：初始時頂部圖片只顯示中間部分，其余部分，分別隱藏在屏幕上邊緣和時間軸模塊下方，隨著下拉，圖片會逐漸展開。

時間軸效果：位于左邊，虛線貫穿整個List，每個內容模塊前都有一個時間軸節點。

效果預覽圖

使用說明

1. 點擊向下拖動，頂部背景，上方和下方會分別從屏幕上邊緣以及時間軸模塊下方，逐漸顯示出來。

實現思路

1. 下拉刷新效果：通過 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) // 必須設置列表為滑動到邊緣無效果
}

2. 時間軸效果：時間軸部分：通過設置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