23
私のプロジェクトでタッチスワイプイベントを有効にするためにreact-swipeable-viewsを使用しています。異なるdivの間でスワイプすることができます。これは<SwipeableViews/>の中にあります。私は3つの異なるdivを持っています。そのうちの1つのdivには、画像のリストがあります。残りの2つの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>
);
}
}
しかし、slide2とslide3との間にスワイプすると、非常に滑らかです。しかし、slide1とslide2の間をスワイプすると、少しゆがんで滑らかではありません。私はクロームコンソールで確認したときに、私はこのエラーを取得しています：私は、画像を削除した場合
Deferred long-running timer task(s) to improve scrolling smoothness. See crbug.com/574343.
:3000/#/profile/photos?_k=4qkf5g:1
そのは再び非常にスムーズに作業し、第一のdivを形成します。 1番目のdivと2番目のdivの間でスワイプを滑らかにする（1番目のdivの画像を持っている間に）には何ができますか？私を助けてください。
あなたに見て考えることができスワイプ完全 –
一つが反応し、キャンバスをしたら、タイマーを使用してslide1の画像を読み込むようにしてください。フリップボードは、キャンバスを使ってモバイルサイトでこのようなことをして、とてもスムーズに感じています。 –
こんにちは、[WebpackBinデモ]（http://www.webpackbin.com/4kjOGHr2Z）をあなたのコードと共に一緒に投げました。それをチェックしてください。それは私の（クアッドコア）ラップトップ上のすべてのシルクスムーズに見えます。 –