純血鴻蒙APP實戰開發——下拉展開圖片和時間軸效果實現案例

介紹

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

時間軸效果:位于左邊,虛線貫穿整個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) // 必須設置列表為滑動到邊緣無效果
}
  1. 時間軸效果:時間軸部分:通過設置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
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容