REM适配发现组件轮播图没有适配

最新推荐文章于 2024-04-09 16:56:08 发布

原创最新推荐文章于 2024-04-09 16:56:08 发布 · 415 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #前端 #服务器

文章讲述了在Vant4组件库中，轮播图的宽度设置为固定值150无法被vw单位转换插件处理，导致在非375宽度设备上出现问题。为了解决这个问题，文章推荐使用@vueuse/core库的useWindowSize组合API来动态获取设备宽度，并根据设备宽度按比例设置轮播图宽度，确保在任何屏幕尺寸下都能适配。

发现vant4组件的轮播图没有适配

<van-swipe :width="150" :show-indicators="false" :loop="false"></van-swipe>

问题：上面设置的 150 宽度是不能被转换 vw 的插件处理的，也就意味了在非 375 宽度下，还是 150 这个设置是不对的

解决办法 @vueuse/core 组合 API 库，使用 useXxx 函数获取设备宽度，动态设置滚动距离。

<van-swipe :width="width" :show-indicators="false" :loop="false"></van-swipe>

//下载包  npm yarn 都行吧
pnpm add @vueuse/core
 //引入
import { useWindowSize } from '@vueuse/core'
//导入
const { width } = useWindowSize()
//这样在任何宽度就能适配了
<van-swipe :width="(150 / 375) * width" :show-indicators="false" :loop="false"></van-swipe>