Я использую react-swipeable-views в моем проекте, чтобы включить события сенсорного салфетки. Я могу провести между разными div
, которые находятся внутри <SwipeableViews/>
. У меня есть три разных div, из которых в первом div у меня есть список изображений. В остальных двух остальных divs ничего нет.
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
, это немного отрывистое и негладное. И когда я проверяю хром-консоль, я получаю эту ошибку:
Отложенная задача с большим сроком действия, чтобы улучшить гладкость прокрутки. См. Crbug.com/574343.
: 3000/#/profile/photos? _k = 4qkf5g: 1
Если я удалю изображения из первого div, он будет работать очень плавно снова. Что я могу сделать, чтобы сгладить прокрутку (имея изображения в 1-м div) между 1-м и 2-м диванами? Пожалуйста, помогите мне.