当前位置: 首页 > news >正文

image媒体组件属性配合swiper轮播

图片组件(image)

先插入个图片试试,插入图片用src属性,这是图片:
在这里插入图片描述

代码如下:

<template><view><swiper indicator-dots indicator-color ="#126bae" indicator-active-color = "#ee3f4d" circular autoplay interval = "2000" vertical><swiper-item>我是第一区域</swiper-item><swiper-item >我是第二区域</swiper-item><swiper-item>我是第三区域</swiper-item><swiper-item> 我是第四区域</swiper-item></swiper></view><view> <image src = "../../static/清新空气.png" class="pic1"></image></view>
</template><script	setup></script><style lang="scss">swiper{width:100vw ;height: 200px;border: 1px solid green;swiper-item{width: 100%;height:100%;background: pink;}swiper-item:nth-child(2n){background: coral;}}
</style>

实际效果:
在这里插入图片描述
如图可见,图片被拉伸了,这是因为系统会默认给图片设置一个尺寸,如对图片尺寸有要求,需要在插入后手动设置图片尺寸。

图片的导入

图片是存放在static文件夹中的,如需导入图片,右键static—在外部资源管理器打开,后将图片复制进文件夹即可。
在这里插入图片描述

mode属性

aspectFit和aspectFill

mode属性,就是图片裁剪、缩放的模式,这里简单说2种mode属性:aspectFit和aspectFill。
先插入一张长方形图片,并为其设定正方形的宽高:
在这里插入图片描述
代码如下:

<template><view><swiper indicator-dots indicator-color ="#126bae" indicator-active-color = "#ee3f4d" circular autoplay interval = "2000" vertical><swiper-item>我是第一区域</swiper-item><swiper-item >我是第二区域</swiper-item><swiper-item>我是第三区域</swiper-item><swiper-item> 我是第四区域</swiper-item></swiper></view><view> <image src = "../../static/pic3.webp" class="pic2"></image></view>
</template><script	setup></script><style lang="scss">swiper{width:100vw ;height: 200px;border: 1px solid green;swiper-item{width: 100%;height:100%;background: pink;}swiper-item:nth-child(2n){background: coral;}}.pic2{width: 200px;height:200px;}
</style>

效果如下:
在这里插入图片描述

aspectFit属性

aspectFit,会保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来,代码如下:

<template><view><swiper indicator-dots indicator-color ="#126bae" indicator-active-color = "#ee3f4d" circular autoplay interval = "2000" vertical><swiper-item>我是第一区域</swiper-item><swiper-item >我是第二区域</swiper-item><swiper-item>我是第三区域</swiper-item><swiper-item> 我是第四区域</swiper-item></swiper></view><view> <image src = "../../static/pic3.webp" class="pic2"mode = "aspectFit"></image></view>
</template><script	setup></script><style lang="scss">swiper{width:100vw ;height: 200px;border: 1px solid green;swiper-item{width: 100%;height:100%;background: pink;}swiper-item:nth-child(2n){background: coral;}}.pic2{width: 200px;height:200px;}
</style>

效果如下:
在这里插入图片描述
可以看到,在刚刚设定的正方形容器中,图片被完整的显示出来了。

aspectFill属性

aspectFill,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取,代码如下:

<template><view><swiper indicator-dots indicator-color ="#126bae" indicator-active-color = "#ee3f4d" circular autoplay interval = "2000" vertical><swiper-item>我是第一区域</swiper-item><swiper-item >我是第二区域</swiper-item><swiper-item>我是第三区域</swiper-item><swiper-item> 我是第四区域</swiper-item></swiper></view><view> <image src = "../../static/pic3.webp" class="pic2"mode = "aspectFill"></image></view>
</template><script	setup></script><style lang="scss">swiper{width:100vw ;height: 200px;border: 1px solid green;swiper-item{width: 100%;height:100%;background: pink;}swiper-item:nth-child(2n){background: coral;}}.pic2{width: 200px;height:200px;}
</style>

效果如下:
在这里插入图片描述
可以看到,图片的短边完整显示了,但两侧被截取了。

widthFix和heightFix

WidthFix:宽度不变,高度自动变化,保持原图宽高比不变。
heightFix:高度不变,宽度自动变化,保持原图宽高比不变。
接下来,演示WidthFix,插入新图片,只给它设置宽度:
在这里插入图片描述
代码如下:

	<view><swiper indicator-dots indicator-color ="#126bae" indicator-active-color = "#ee3f4d" circular autoplay interval = "2000" vertical><swiper-item>我是第一区域</swiper-item><swiper-item >我是第二区域</swiper-item><swiper-item>我是第三区域</swiper-item><swiper-item> 我是第四区域</swiper-item></swiper></view><view> <image src = "../../static/pic3.webp" class="pic2"mode = "aspectFill"></image><image src = "../../static/pic4.jpg" class = "pic3"></image></view>
</template><script	setup></script><style lang="scss">swiper{width:100vw ;height: 200px;border: 1px solid green;swiper-item{width: 100%;height:100%;background: pink;}swiper-item:nth-child(2n){background: coral;}}.pic2{width: 200px;height:200px;}.pic3{width: 300px;}
</style>

效果如下:
在这里插入图片描述
可以看到,图片尺寸发生了变化,现在加入widthFix属性,代码如下:

<template><view><swiper indicator-dots indicator-color ="#126bae" indicator-active-color = "#ee3f4d" circular autoplay interval = "2000" vertical><swiper-item>我是第一区域</swiper-item><swiper-item >我是第二区域</swiper-item><swiper-item>我是第三区域</swiper-item><swiper-item> 我是第四区域</swiper-item></swiper></view><view> <image src = "../../static/pic3.webp" class="pic2"mode = "aspectFill"></image><image src = "../../static/pic4.jpg" class = "pic3" mode = "widthFix"></image></view>
</template><script	setup></script><style lang="scss">swiper{width:100vw ;height: 200px;border: 1px solid green;swiper-item{width: 100%;height:100%;background: pink;}swiper-item:nth-child(2n){background: coral;}}.pic2{width: 200px;height:200px;}.pic3{width: 300px;}
</style>

效果如下:
在这里插入图片描述
可以看到,图片恢复了原宽高比,HeightFix属性同理,不再做演示。

将图片放置到swiper滚动容器中

接下来,把图片放到swiper-item中,设置aspectFill属性,并将尺寸设置为100%充满容器,实现图片滚动,代码如下:

<template><view><swiper indicator-dots indicator-color ="#126bae" indicator-active-color = "#ee3f4d" circular autoplay interval = "2000" vertical><swiper-item><image src="../../static/pic1.png" mode="aspectFill"></image></swiper-item><swiper-item><image src="../../static/pic2.png" mode="aspectFill"></image></swiper-item><swiper-item><image src="../../static/pic4.jpg" mode="aspectFill"></image></swiper-item><swiper-item><image src = "../../static/pic3.webp" mode="aspectFill"></image></swiper-item></swiper></view></template><script	setup></script><style lang="scss">swiper{width:100vw ;height: 200px;border: 1px solid green;swiper-item{width: 100%;height:100%;background: pink;image{width: 100%;height:100%;}}swiper-item:nth-child(2n){background: coral;}}.pic2{width: 200px;height:200px;}.pic3{width: 300px;}
</style>

效果如下:
在这里插入图片描述

相关文章:

image媒体组件属性配合swiper轮播

图片组件&#xff08;image&#xff09; 先插入个图片试试&#xff0c;插入图片用src属性&#xff0c;这是图片&#xff1a; 代码如下&#xff1a; <template><view><swiper indicator-dots indicator-color "#126bae" indicator-active-color &…...

nginx的匹配及重定向

一、nginx的匹配&#xff1a; nginx中location的优先级和匹配方式&#xff1a; 1.精确匹配&#xff1a;location / 对字符串进行完全匹配&#xff0c;必须完全符合 2.正则匹配&#xff1a;location ^~ ^~ 前缀匹配&#xff0c;以什么为开头 ~区分大小写的匹配 ~* 不区分…...

云计算【第一阶段(23)】Linux系统安全及应用

一、账号安全控制 1.1、账号安全基本措施 1.1.1、系统账号清理 将非登录用户的shell设为/sbin/nologin锁定长期不使用的账号删除无用的账号 1.1.1.1、实验1 用于匹配以/sbin/nologin结尾的字符串&#xff0c;$ 表示行的末尾。 &#xff08;一般是程序用户改为nologin&…...

YUM——简介、安装(Ubuntu22.04)

1、简介 YUM&#xff08;Yellowdog Updater, Modified&#xff09;是一个开源的命令行软件包管理工具&#xff0c;主要用于基于 RPM 包管理系统的 Linux 发行版&#xff0c;如 CentOS、Red Hat Enterprise Linux (RHEL) 和 Fedora。YUM 使用户能够轻松地安装、更新、删除和管理…...

Java面向对象练习(4.文字格斗游戏)(2024.7.4)

角色类 package FightGame20240704; import java.util.Random; public class GameRole {Random r new Random();private String name;private int blood;private char gender;private String face;public GameRole(){}public GameRole(String name, int blood, char gender){…...

Python获取QQ音乐歌单歌曲

准备工作 歌单分享的url地址 比如&#xff1a; https://i.y.qq.com/n2/m/share/details/taoge.html?hosteuinoKvzoK4l7evk7n**&id9102222552&appversion130605&ADTAGwxfshare&appshareiphone_wx 代码实现 def mu(share_url):share_url share_url.split(id…...

Linux系统部署MongoDB开源文档型数据库并实现无公网IP远程访问

文章目录 前言1. 安装Docker2. 使用Docker拉取MongoDB镜像3. 创建并启动MongoDB容器4. 本地连接测试5. 公网远程访问本地MongoDB容器5.1 内网穿透工具安装5.2 创建远程连接公网地址5.3 使用固定TCP地址远程访问 &#x1f4a1; 推荐 前些天发现了一个巨牛的人工智能学习网站&am…...

WPF Menu实现快捷键操作

很多小伙伴说&#xff0c;在Menu中&#xff0c;实现单个快捷键操作很简单&#xff0c;怎么实现多个快捷键操作和&#xff0c;组合快捷键呢&#xff0c;今天他来了。 上代码和效果图 一、Ctrl Shift 任意子母键实现快捷键组合 <Window x:Class"XH.TemplateLesson.M…...

VSCode常用的一些插件

Chinese (Simplified) 汉语&#xff08;简体&#xff09;拓展包。 Auto Close Tag 可以自动增加xml/html的闭合标签。 CodeSnap 截图神器。截图效果在下面。 Dracula Official vscode一个很好看的主题。 Git Graph git管理工具。 GitHub Repositories 有了它&#xff0c;不…...

OV通配符证书用于什么单位

OV&#xff08;Organization Validation&#xff09;通配符SSL证书是一种专门为组织或企业设计的SSL证书类型&#xff0c;它不仅提供了标准的SSL加密功能&#xff0c;还包含了对组织身份的验证。这种证书非常适合以下几种类型的单位使用&#xff1a; 企业级网站&#xff1a; …...

【数据结构】06.栈队列

一、栈 1.1栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出LIFO&#xff08;Last In First Out)的原则。 压栈&#…...

完全理解C语言函数

文章目录 1.函数是什么2.C语言中的函数分类2.1 库函数2.1.1 如何使用库函数 2.2自定义函数 3.函数的参数3.1 实际参数&#xff08;实参&#xff09;3.2 形式参数&#xff08;形参&#xff09; 4.函数调用4.1传值调用4.2 传址调用4.3 练习 5.函数的嵌套调用和链式访问5.1 嵌套调…...

性能测试:JMeter与Gatling的高级配置

性能测试是软件开发过程中不可或缺的一部分&#xff0c;它帮助我们确保应用在高负载下仍能保持良好的响应时间和稳定性。本文将深入探讨两种流行的性能测试工具&#xff1a;Apache JMeter和Gatling&#xff0c;并提供详细的高级配置指南以及Java代码示例。 Apache JMeter 高级…...

Linux 软件管理

Linux 软件管理 在 Linux 系统中&#xff0c;RPM&#xff08;Red Hat Package Manager&#xff09;和 YUM&#xff08;Yellowdog Updater, Modified&#xff09;是用于软件包管理的重要工具。 RPM RPM 是由 Red Hat 公司开发的软件包管理系统。 RPM 软件包通常具有 .rpm 扩…...

五.核心动画 - 图层的变换(平移,缩放,旋转,3D变化)

引言 在上一篇博客中&#xff0c;我们研究了一些视觉效果&#xff0c;在本篇博客中我们将要来讨论一下图层的旋转&#xff0c;平移&#xff0c;缩放&#xff0c;以及可以将扁平物体转换成三维空间对象的CATransform3D。 图层变换 图层的仿射变换 在视图中有一个transform属…...

Linux系统编程——线程基本概念

目录 一&#xff0c;关于多线程 二&#xff0c;重新理解进程 三&#xff0c;线程VS进程 四&#xff0c;线程周边概念 4.1 线程的数据共享 4.2 线程的优点 4.3 线程的缺点 4.4 线程异常 4.5 线程用途 五&#xff0c;一些问题解答 如何理解将资源分配给各个线程&…...

【HALCON】如何实现hw窗口自适应相机拍照成像的大小

前言 在开发一个喷码检测软件的时候碰到相机成像和hw窗体的大小不一致&#xff0c;hw太小显示不完全成像的图片&#xff0c;这使得成像不均匀&#xff0c;现场辨别起来比较不直观&#xff0c;因此需要对其进行一个调整。 解决 省略掉读取图片的环节&#xff0c;我们只需要将…...

【Spring cloud】 认识微服务

文章目录 &#x1f343;前言&#x1f334;单体架构&#x1f38b;集群和分布式架构&#x1f332;微服务架构&#x1f38d;微服务带来的挑战⭕总结 &#x1f343;前言 本篇文章将从架构的演变过程来简单介绍一下微服务&#xff0c;大致分为一下几个部分 单体架构集群和分布式架…...

一个pdf分割成多个pdf,一个pdf分成多个pdf

在数字化办公和学习中&#xff0c;pdf格式因其良好的兼容性和稳定性而受到广泛欢迎。但有时候&#xff0c;我们可能需要将一个大的pdf文件分割成多个小文件&#xff0c;以便于分享、打印或编辑。今天&#xff0c;我就来教大家几种简单有效的方法&#xff0c;让你轻松实现pdf文件…...

rtsp client c++

直接上代码&#xff1a;源码 void doRtspParse(char *b) {std::vector<std::string> res;char *ptr b, *ptr1 nullptr;while ((ptr1 strstr(ptr, "\r\n"))) {res.push_back(std::string(ptr, ptr1 - ptr));ptr ptr1 2;}int len ptr - b;b[len - 1] \0;…...

uniapp 对接腾讯云IM群组成员管理(增删改查)

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

如何应对敏捷转型中的团队阻力

应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中&#xff0c;明确沟通敏捷转型目的尤为关键&#xff0c;团队成员只有清晰理解转型背后的原因和利益&#xff0c;才能降低对变化的…...

Unity中的transform.up

2025年6月8日&#xff0c;周日下午 在Unity中&#xff0c;transform.up是Transform组件的一个属性&#xff0c;表示游戏对象在世界空间中的“上”方向&#xff08;Y轴正方向&#xff09;&#xff0c;且会随对象旋转动态变化。以下是关键点解析&#xff1a; 基本定义 transfor…...

数据库——redis

一、Redis 介绍 1. 概述 Redis&#xff08;Remote Dictionary Server&#xff09;是一个开源的、高性能的内存键值数据库系统&#xff0c;具有以下核心特点&#xff1a; 内存存储架构&#xff1a;数据主要存储在内存中&#xff0c;提供微秒级的读写响应 多数据结构支持&…...

CppCon 2015 学习:REFLECTION TECHNIQUES IN C++

关于 Reflection&#xff08;反射&#xff09; 这个概念&#xff0c;总结一下&#xff1a; Reflection&#xff08;反射&#xff09;是什么&#xff1f; 反射是对类型的自我检查能力&#xff08;Introspection&#xff09; 可以查看类的成员变量、成员函数等信息。反射允许枚…...