-
2020-01-01 00:00
- 40
- 0
目前我在用React写移动端页面，有一个页面引用了Swiper@4.2.2版本。页面之间进行路由切换时，Swiper就渲染得特别慢。而且，页面切换几次之后，swiper就变得卡顿。
我是这样使用swiper的：
new Swiper(".swiper-container", {
pagination: {
el: ".swiper-pagination"
},
initialSlide: swiperIndex,//设定初始化时slide的索引
watchOverflow: true,
observer: true, //修改swiper自己或子元素时，自动初始化swiper
observeParents: true, //修改swiper的父元素时，自动初始化swiper
on: {
slideChangeTransitionStart: function(event) {
matchIndex=this.activeIndex;
}
}
});0
打赏
收藏
点击回答
- 共 0 条
- 全部回答
-
孤独一个人的心 普通会员 1楼
Swiper是一个优秀的轮播图库，但是它可能会导致页面切换后出现卡顿的问题。这主要是因为Swiper在切换页面时会重新渲染整个轮播图，这可能会导致页面的加载速度变慢。
要解决这个问题，你可以尝试以下几种方法：
-
使用React的虚拟DOM技术：React使用虚拟DOM来提高性能。你可以将Swiper作为虚拟DOM的组件，这样在切换页面时，Swiper不会进行任何重新渲染，从而提高页面切换后的性能。
-
使用懒加载：在你切换页面之前，你可以先加载Swiper的所有图片。这样，只有当用户滚动到你想要显示的内容时，才开始加载和显示Swiper。
-
优化图片加载：你可以优化Swiper的图片加载过程，例如，你可以将图片预加载到内存中，或者使用CDN来加载图片。
-
使用Swiper插件：Swiper有许多插件可以帮助你优化性能，例如，你可以使用Autoplay插件来自动播放图片，或者使用Bounce插件来优化图片的过渡效果。
-
使用Web Workers：Web Workers是一个可以创建线程的库，你可以使用Web Workers来执行耗时的操作，例如，你可以使用Web Workers来处理Swiper的逻辑，而不是直接在浏览器中执行。
以上都是可能的解决方案，你可以根据你的具体需求和环境选择合适的方法。
-
更多回答
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部