适配滑动宽度(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>
 <!-- swipe 组件 -->
   <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>

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/236514.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

扔掉xshell,基于 QT 实现一个串口命令行工具(带源码)

背景 xshell 带有支持串口的命令行能力&#xff0c; 可以方便的和下位机用命令进行交互&#xff0c;如下图所示&#xff1a; msh > msh > msh >version\ | / - RT - Thread Operating System/ | \ 3.1.3 build Nov 7 20232006 - 2019 Copyright by rt-thre…

2023年度盘点:智能汽车、自动驾驶、车联网必读书单

【文末送书】今天推荐几本自动驾驶领域优质书籍 前言 2023年&#xff0c;智能驾驶和新能源汽车行业仍然有着肉眼可见的新进展。自动驾驶技术继续尝试从辅助驾驶向自动驾驶的过渡&#xff0c;更重要的是相关技术成本的下降。根据《全球电动汽车展望2023》等行业报告&#xff0c…

【LeetCode刷题】--119.杨辉三角II

119.杨辉三角II class Solution {public List<Integer> getRow(int rowIndex) {List<List<Integer>> nums new ArrayList<List<Integer>>();for(int i 0; i < rowIndex;i){List<Integer> res new ArrayList<Integer>();for(in…

2.DevEco Studio 安装java开发环境

DevEco Studio 安装java开发环境 选择settings

# 一些视觉-激光、加速度传感器类的铣削振动测试方法案例

一些视觉-激光类的铣削振动测试方法 1. 基于激光测振仪的振动测试2. 切削加工的 加速度传感器实测信号2.1 x轴向信号2.2 Y轴向信号3. 关于数值频域积分1. 基于激光测振仪的振动测试 【1】舜宇LDV|激光测振—机床铣刀寿命预测 新刀具为100hz主频 旧刀具为800hz主频 方法原理:…

使用Huggingface创建大语言模型RLHF训练流程的完整教程

ChatGPT已经成为家喻户晓的名字&#xff0c;而大语言模型在ChatGPT刺激下也得到了快速发展&#xff0c;这使得我们可以基于这些技术来改进我们的业务。 但是大语言模型像所有机器/深度学习模型一样&#xff0c;从数据中学习。因此也会有garbage in garbage out的规则。也就是说…

关于加密解密,加签验签那些事

面对MD5、SHA、DES、AES、RSA等等这些名词你是否有很多问号&#xff1f;这些名词都是什么&#xff1f;还有什么公钥加密、私钥解密、私钥加签、公钥验签。这些都什么鬼&#xff1f;或许在你日常工作没有听说过这些名词&#xff0c;但是一旦你要设计一个对外访问的接口&#xff…

Nginx配置文件的基本用法

Nginx简介 1.1概述 Nginx是一个高性能的HTTP和反向代理服务器。 是一款轻量级的高性能的web服务器/反向代理服务器/电子邮件&#xff08;IMAP/POP3&#xff09;代理服务器 单台物理服务器可支持30 000&#xff5e;50 000个并发请求。 1.2Nginx和Apache的优缺点 &#xff…

做数据分析为何要学统计学(9)——什么是回归分析

​回归分析&#xff08;regression analysis)是量化两种或两种以上因素/变量间相互依赖关系的统计分析方法。回归分析根据因素的数量&#xff0c;分为一元回归和多元回归分析&#xff1b;按因素之间依赖关系的复杂程度&#xff0c;可分为线性回归分析和非线性回归分析。我们通过…

记录 | ubuntu源码编译安装/更新boost版本

一、卸载当前的版本 1、查看当前安装的boost版本 dpkg -S /usr/include/boost/version.hpp通过上面的命令&#xff0c;你就可以发现boost的版本了&#xff0c;查看结果可能如下&#xff1a; libboost1.54-dev: /usr/include/boost/version.hpp 2、删除当前安装的boost sudo …

人工智能数据集可视化统计分析工具:快速了解你的数据集

人工智能数据集可视化统计分析工具&#xff1a;快速了解你的数据集 简介特征示例报告安装用法 简介 Lightly Insights&#xff1a;可以轻松获取关于机器学习数据集基本洞察的工具&#xff0c;可以可视化图像数据集的基本统计信息&#xff0c;仅需提供一个包含图像和对象检测标…

perl处理json的序列化和反序列化

perl可以使用JSON模块很方便的处理json的序列化和反序列化。先来一段简单的例子&#xff1a; #! /usr/bin/perl use v5.14; use JSON; use IO::File;my $info {id > 1024,desc > hello world,arry > [1, 2, 3, 4, 5],obj > {char > [ A, B, C ]} };say to_jso…

微服务学习:Nacos微服务架构中的服务注册、服务发现和动态配置Nacos下载

Nacos的主要用途包括&#xff1a; 服务注册与发现&#xff1a;Nacos提供了服务注册和发现的功能&#xff0c;服务提供者可以将自己的服务注册到Nacos服务器上&#xff0c;服务消费者则可以通过Nacos来发现可用的服务实例&#xff0c;从而实现服务调用。 动态配置管理&#xff…

力扣编程题算法初阶之双指针算法+代码分析

目录 第一题&#xff1a;复写零 第二题&#xff1a;快乐数&#xff1a; 第三题&#xff1a;盛水最多的容器 第四题&#xff1a;有效三角形的个数 第一题&#xff1a;复写零 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 思路&#xff1a; 上期…

【媒体邀约】年底企业应该做哪些宣传工作?

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 年底是企业进行宣传的好时机&#xff0c;以下是一些建议&#xff1a; 1. 年终总结&#xff1a;发布企业的年度业绩报告、新产品或服务、市场活动等方面的总结&#xff0c;展示企业的成长…

Day06(下) Liunx高级系统设计7-磁盘映射与共享内存

磁盘映射MMAP 概述 存储映射 I/O (Memory-mapped I/O) 使一个磁盘文件与存储空间中的一个缓冲区相 映射。于是当从缓冲区中取数据&#xff0c;就相当于读文件中的相应字节。于此类似&#xff0c;将数据存 入缓冲区&#xff0c;则相应的字节就自动写入文件。这样&#xff…

使用JLink仿真器实现调试打印的N种方法

方法一&#xff1a;使用MCU的串口 这是最古老也是最简单的方法。 电脑上面插一个USB转TTL&#xff0c;然后与MCU的UART_RX/UART_TX/GND连接起来。PC端再打开一个串口调试助手。两边的波特率一致&#xff0c;就可以收到MCU发过来的打印信息了。 方法二&#xff1a;使用JLink仿…

10天玩转Python第2天:python判断语句基础示例全面详解与代码练习

目录 1.课程之前1.1 复习和反馈1.2 作业1.3 今日内容1.4 字符串格式化的补充1.5 运算符1.5.1 逻辑运算符1.5.2 赋值运算符1.5.3 运算符优先 2.判断2.1 if 的基本结构2.1.1 基本语法2.1.2 代码案例2.1.3 练习 2.2 if else 结构2.2.1 基本语法2.2.2 代码案例2.2.3 练习 2.3 if 和…

java--BigDecimal

1.BigDecimal 用于解决浮点型运算时&#xff0c;出现结果失真的问题 2.BigDecimal的常见构造器、常用方法

如何使用unittest批量管理Python接口自动化测试用例?

我们日常项目中的接口测试案例肯定不止一个&#xff0c;当案例越来越多时我们如何管理这些批量案例&#xff1f;如何保证案例不重复&#xff1f;如果案例非常多&#xff08;成百上千&#xff0c;甚至更多&#xff09;时如何保证案例执行的效率&#xff1f;如何做&#xff08;批…