使用swipe组件，切换图片时出现闪烁

最新推荐文章于 2024-04-30 17:31:51 发布

superYe7

最新推荐文章于 2024-04-30 17:31:51 发布

阅读量1.2k

点赞数 2

分类专栏： css3 文章标签： css3 swipe

本文链接：https://blog.youkuaiyun.com/superYe7/article/details/118678256

版权

css3 专栏收录该内容

1 篇文章

订阅专栏

这篇博客探讨了如何通过在父元素和子元素上应用特定的CSS样式来优化移动端的图片轮播组件。通过设置`transform:translate3d(0,0,0)`和`overflow:hidden`，可以实现平滑滚动并提高性能。同时，限制子元素的最大高度和宽度，并保持相同的转换，确保内容适应容器。这种方法对于提升用户体验和减少不必要的重新布局计算至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决方案：

父元素上增加样式 style="transform:translate3d(0,0,0);overflow:hidden;"

子元素增加样式 style="max-height: 100%;max-width: 100%;transform:translate3d(0,0,0)"

<van-swipe :show-indicators="false" :loop="false" ref="swipeImg" :stop-propagation="false"
   style="transform:translate3d(0,0,0);overflow:hidden;">
   <van-swipe-item v-for="(image) in imgList" :key="image.id" class="swiptItem">
       <img :src="image.url" style="max-height: 100%;max-width: 100%;transform:translate3d(0,0,0)" />
   </van-swipe-item>
</van-swipe>