Hong Mong 5 Development Treasure Case Sharing Experience Smooth Home Info Stream

🌟 HarmonyOS News Home Page Development Guide: Smooth Animation + Lazy Loading Practice

Hey HarmonyOS Developers! Today I'm sharing a super practical solution for developing a news-style homepage in HarmonyOS. I've dug out a treasure case from the official docs! From smooth tab switching animations to silky lazy loading lists, I'll walk you through building a high-performance news homepage👇

🚀 Overall Scene Effect

User Operation Flow:

Get location permission → 2. Tap the top address bar to switch city → 3. Swipe/click Tab to switch news category → 4. Pull down to refresh + pull up to load more → 5. One-click back to top (Actual effect is smoother than GIF)

Performance Highlights:

Tab switch response delay only 51ms
Pull-down refresh response 153ms, pull-up load 150ms
Bottom navigation Lottie animation frame rate stable at 60FPS

🔥 Core Module Code Practice

1️⃣ Navigation Bar Switch Animation (51ms Response Secret)

Problem: UsingonChangeevent causes animation delay!

Correct Solution: UseonAnimationStartto trigger animation synchronously

// TabBar.ets  
build() {  
  Tabs({ barPosition: BarPosition.Start }) {  
    ForEach(this.tabBarArray, (item) => {  
      TabContent() { /* News List */ }  
    })  
  }  
  .onAnimationStart((_, targetIndex) => {  
    this.currentIndex = targetIndex; // Key! Sync tab state in real time  
    playTabAnimation(); // Custom animation function  
  })  
}

💡 Pitfall Guide:

Avoid usingonClick(conflicts with swipe)
Animation resources should be less than 30KB (ensure loading speed)

2️⃣ Bottom Navigation Lottie Animation (349ms Ultimate Experience)

Three Steps to Achieve Dynamic Icons:

Step 1: Install animation library

ohpm install @ohos/lottie

Step 2: Encapsulate animation controller

// Home.ets  
import lottie from '@ohos/lottie';  

private lottieController() {  
  lottie.stop(); // Stop previous animation  
  lottie.play(this.tabOptions[this.currentIndex].name); // Play current tab animation  
}

Step 3: Render animation in Canvas

Canvas(this.canvasContext)  
  .onReady(() => {  
    lottie.loadAnimation({  
      container: this.canvasContext,  
      path: 'common/lottie_home.json', // Animation resource path  
      autoplay: false  
    });  
  })

🌟 Tips:

UseRenderingContextSettings(true)to enable anti-aliasing
Put animation JSON files inentry/src/main/resources/rawfiledirectory

3️⃣ Pull Down to Refresh & Pull Up to Load (150ms Response)

Awesome Third-Party Library:pullToRefresh

// Install dependency  
ohpm install @ohos/pulltorefresh  

// Usage example  
PullToRefresh({  
  data: $newsData, // Data source  
  scroller: this.scroller, // Scroll controller  
  onRefresh: () => {  
    return new Promise((resolve) => {  
      fetchNewData(); // Simulate network request  
      setTimeout(resolve, 500);  
    });  
  },  
  onLoadMore: () => { /* Similar implementation */ }  
}) {  
  LazyForEach(this.newsData, (item) => {  
    NewsItem({ data: item }) // Encapsulated news item component  
  })  
}

⚠️ Key Configuration:

Listcomponent must set edgeEffect: EdgeEffect.None to avoid native scroll conflict

4️⃣ Homepage Feed Lazy Loading (Smooth with Tens of Thousands of Data)

Performance Core:LazyForEach + Pagination Loading

List() {  
  LazyForEach(this.newsDataSource, (item: NewsData) => {  
    ListItem() {  
      NewsItem({  
        title: item.title,  
        image: item.image,  
        // ...  
      })  
    }  
  }, item => item.id.toString())  
}  
.onScrollIndex((first, last) => {  
  if (last > this.data.length - 5) {  
    loadMoreData(); // Load more when reaching the bottom  
  }  
})

🚀 Optimization Points:

UseAsyncImagefor async image loading
UseTextOptimizationto enable font cache for text

5️⃣ Address Selection Page (Accurate Positioning + Fast Search)

Dual Approach:

Location Service: Get real-time geographic info
AlphabetIndexer: City index navigation

// Get current location  
geoLocationManager.getCurrentLocation((err, location) => {  
  if (location) {  
    geoLocationManager.getAddressesFromLocation({  
      latitude: location.latitude,  
      longitude: location.longitude  
    }, (err, address) => {  
      AppStorage.setOrCreate('currentCity', address[0].locality);  
    });  
  }  
});  

// City index list  
AlphabetIndexer({ arrayValue: ['A','B','C'...] })  
  .onSelect((index) => {  
    this.scroller.scrollToIndex(index); // Jump to corresponding letter  
  })

🔐 Permission Configuration:

Add inmodule.json5:

"requestPermissions": [  
  "ohos.permission.LOCATION",  
  "ohos.permission.APPROXIMATELY_LOCATION"  
]

💎 Summary

This news homepage solution perfectly integrates:

✅ Performance Optimization: LazyForEach lazy loading + animation priority control

✅ Experience Upgrade: Delicate Lottie animation + gesture interaction feedback

✅ Development Efficiency: Third-party components (pullToRefresh/lottie) quick integration

One last word: I'll bring more practical cases next time! If you find it useful, remember to like and bookmark🌟 → See you in the comments if you have questions👇