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），请查看它。它在我的（四核）笔记本电脑上看起来都很光滑。 –