发现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>