23
我在我的項目中使用react-swipeable-views來啓用觸摸滑動事件。我可以在<SwipeableViews/>以內的不同div之間滑動。我有三個不同的div，其中，在第一個div中，我有圖像列表。在剩下的另外兩個div中，什麼也沒有。劃線之間的滑動平滑度不同
export default class Photos extends React.Component {
render() {
const styles = {
slide: {
padding: '15px',
minHeight: '500px',
color: '#fff',
},
slide1: {
background: '#FEA900',
overflowY: 'hidden'
},
slide2: {
background: '#B3DC4A',
},
slide3: {
background: '#6AC0FF',
}
}
return(
<div id="profile_photos">
<div id="profile_photos_nav">
<span class="photo_nav" id="photo_timeline">
<button class="active_btn">Timeline Photos</button>
</span>
<span class="photo_nav" id="photo_profile">
<button>Profile Photos</button>
</span>
<span class="clear_both"></span>
</div>
<SwipeableViews>
<div style={Object.assign({}, styles.slide, styles.slide1)}>
<img src="img/img3.jpg"/>
<img src="img/img5.jpg"/>
<img src="img/img6.jpg"/>
<img src="img/img7.jpg"/>
</div>
<div style={Object.assign({}, styles.slide, styles.slide2)}>
slide n°2
</div>
<div style={Object.assign({}, styles.slide, styles.slide3)}>
slide n°3
</div>
</SwipeableViews>
</div>
);
}
}
然而，slide2slide3和滑動之間是非常流暢。但是當在slide1和slide2之間滑動時，它有點生澀並且不光滑。當我在Chrome控制檯檢查，我收到此錯誤：
Deferred long-running timer task(s) to improve scrolling smoothness. See crbug.com/574343.
:3000/#/profile/photos?_k=4qkf5g:1
如果我刪除的圖像形成的第1格，它的再次合作非常順利。我能做些什麼來平滑第一格和第二格之間的滑動（同時在第一格中有圖像）？請幫幫我。
嘗試使用定時器重新裝載滑件的圖像，一旦刷卡完成 –
你會考慮尋找到的一件事是反應畫布。 Flipboard在使用畫布的移動網站上做了一些精彩的事情，讓它感覺非常流暢。 –
嗨，我把你的代碼扔在一起[WebpackBin demo]（http://www.webpackbin.com/4kjOGHr2Z），請查看它。它在我的（四核）筆記本電腦上看起來都很光滑。 –