的水平「粘性」中心元素反應原住民的ListView

對於這個問題我的完整的源代碼被公佈爲世博會的應用程序：https://exp.host/@kevinoldlifeway/swipe-scrollview-of-webviews以及在Github上https://github.com/kevinold/swipe-scrollview-of-webviews 的水平「粘性」中心元素反應原住民的ListView

我建立一個書鑑於本機作出反應。使用ScrollView，我想左右滑動瀏覽可能有幾百到幾千個標題的頁面。

既然是這樣的話，我的目標是隻有數據的最小量，使得用戶可以在頁面之間輕掃，眼看着馬上上一頁和下一頁。

我加載一個3元素的數組像這樣：

[Previous, Current, Next]

這將處於通過終極版更新（不是在這裏用來保持簡單），並會重新渲染和調整名單。

我的目標是我的ScrollView始終是「中心」的「當前」頁面上。

滾動到上一頁和下一頁的頁面由handleScroll方法處理，該方法加載相應的預先計算數組，以便當前頁面保持焦點，但上一頁和下一頁（屏幕外）適當更新。

handleScroll (event) { 
    //const x = event.nativeEvent.contentOffset.x; 

    const { activeIndex, scrollTimes } = this.state; 

    const windowWidth = Dimensions.get('window').width; 
    const eventWidth = event.nativeEvent.contentSize.width; 
    const offset = event.nativeEvent.contentOffset.x; 
    console.log('event width: ', eventWidth); 
    console.log('event offset: ', offset); 

    console.log('scrollTimes: ', scrollTimes); 
    //if (scrollTimes <= 1) return; 

    if (windowWidth + offset >= eventWidth) { 
     //ScrollEnd, do sth... 
     console.log('scrollEnd right (nextPage)', offset); 
     const nextIndex = activeIndex + 1; 
     console.log('nextIndex: ', nextIndex); 

    // Load next page 
    this.loadMore() 

    } else if (windowWidth - offset <= eventWidth) { 
     //ScrollEnd, do sth... 
     console.log('scrollEnd left (prevPage)', offset); 

    // Load prev page 
    this.loadPrev() 
    } 

    this.setState({ scrollTimes: scrollTimes + 1 }); 
}

我試圖用平衡的組合「當前」頁數：ScrollView

而且

componentDidMount() { 
    // Attempt to keep "center" element in array as focused "screen" in the horizontal list view 
    this.scrollView.scrollTo({ x: width, y: 0, animated: false }); 
}

contentOffset={{ x: width, y: 0 }}我也試着scrollTo在回撥後this.setState，但一直沒有任何運氣。

我想知道如果這個「定心」，可以通過使用Animated完成。

來源

2017-04-25 Kevin Old

我給了這個鏡頭，但我不完全確定我理解了這個問題，而且我不確定這會如何保持。

基本上我只是簡化了handleScroll函數。首先檢查我們是否在滾動完成，如果是這樣，確定我們在該屏幕上登陸時是「上一個」屏幕還是「下一個」 - 如果它已經是中間屏幕，則不執行任何操作。

我想在你的代碼的問題是，它會觸發和負載數據，如果它是中間的屏幕，不只是第一個或最後一個。因此每次轉換都會觸發兩次。

下面是我認爲會爲你工作的handleScroll。

handleScroll (event) { 
    const offset = event.nativeEvent.contentOffset.x; 
    const mod = offset % width; 

    if (mod === 0) { // only transition on scroll complete 
    if (offset === width * 2) { // last screen 
     console.log('load more') 
     this.loadMore(); 
     this.scrollView.scrollTo({ x: width, y: 0, animated: false }); 
    } else if (offset !== width) { // first screen 
     console.log('load prev') 
     this.loadPrev(); 
     this.scrollView.scrollTo({ x: width, y: 0, animated: false }); 
    } 
    } 
}

和Snack演示它。

來源

2017-04-25 20:39:27

的水平「粘性」中心元素反應原住民的ListView

回答

相關問題