Question

我在项目中使用react-swipeable-views来启用触摸滑动事件。我可以在div内的不同<SwipeableViews/>之间滑动。我有三个不同的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>
        );
    }
}

但是，在slide2和slide3之间滑动非常顺利。但是当在slide1和slide2之间滑动时，它有点生涩而且不平滑。当我检查chrome控制台时，我收到此错误：

延迟长时间运行的计时器任务以提高滚动平滑度。见crbug.com/574343。

：3000 /＃/个人资料/照片？_k = 4qkf5g：1

如果我从第一个div中删除图像，它的工作再次非常顺利。我可以做些什么来平滑第一个div和第二个div之间的滑动（同时在第一个div中有图像）？请帮帮我。

Answer 1

可能值得尝试css属性'will-change'告诉浏览器元素可能会移动。

https://css-tricks.com/almanac/properties/w/will-change/

Answer 2

如果它与渲染引擎有关，你可以触发GPU，它比CPU快，在滑动开始滑动之前应用某种css转换（例如rotate(0.00001deg)），然后删除刷卡完成转换。

顺便说一句，我不知道这是否会提高你的滑块性能，但值得尝试。

div之间的滑动平滑度不同

2 个答案: