适配滑动宽度(Vant)

@vueuse/core 介绍:

文档https://vueuse.org/core/useWindowSize/

是一个基于 组合API 封装的库,提供了一些网站开发常用的工具函数,切得到的是响应式数据
例如:
在 375 宽度设备,滚动宽度为 150
在其他设备需要等比例设置滚动的宽度
scrollWidth = 150 / 375 * Width 就可以适配
@vueuse/core 应用:
安装:pnpm add @vueuse/core
import { useWindowSize } from ‘@vueuse/core’
const { width } = useWindowSize()

<script setup lang="ts">
import { useWindowSize } from '@vueuse/core'
const { width } = useWindowSize()
script>

<template>
 
   <van-swipe
     :width="(150 / 375) * width"
     :show-indicators="false"
     :loop="false">
     <van-swipe-item v-for="item in 5" :key="item">
       <doctor-card />
     van-swipe-item>
   van-swipe>
template>

适配滑动宽度(Vant)_第1张图片
适配滑动宽度(Vant)_第2张图片

你可能感兴趣的:(前端,typescript)