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>

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Jectpack Navigation组件设置统一跳转动画

Activity的跳转一般通过Theme设置即可&#xff0c;但是Framment的跳转除了NavigationUI类提供的方法会有动画以外&#xff0c;直接调用navigate方法是没有动画的。 网上的实现个人认为比较麻烦&#xff0c;帮自己写了一套&#xff0c;主要就是自定义NavHostFragement和Fragmen…

CobaltStrike的内网安全

1.上线机器的Beacon的常用命令 2.信息收集和网站克隆 3.钓鱼邮件 4.CS传递会话到MSF 5.MSF会话传递到CS 1上线机器的Beacon的常用命令 介绍&#xff1a;CobaltStrike分为服务端和客户端&#xff0c;一般我们将服务端放在kali&#xff0c;客户端可以在物理机上面&#xff0…

tongweb 部署软航流版签一体化应用示例 提示跨域错误CORS ERROR

目录 问题现象与描述 解决办法 原理解析 什么是CORS 浏览器跨域请求限制 跨域问题解决方法 跨域请求流程 浏览器请求分类解析 http请求方法简介 问题现象与描述 重庆软航科技有限公司提供了一套针对针对word、excel等流式文件转换成PDF版式文件并进行版式文件在线签章…

ai积累-具体应用的大概设想

这些场景展示了以 ChatGPT 为代表的生成式 AI 可能的具体应用&#xff1a; 教育辅助&#xff1a; AI 可以充当学生的个性化辅导老师&#xff0c;提供定制化的学习材料和练习。例如&#xff0c;它可以生成针对学生能力水平和兴趣的数学问题或历史教学文章。 客户支持&#xff1…

LESS 的嵌套写法有什么优势?

LESS的嵌套写法可以提高代码的可读性和维护性。通过将相关的样式规则嵌套在父选择器中&#xff0c;可以更清晰地表达样式之间的层级关系&#xff0c;避免重复的代码&#xff0c;并且使样式结构更加整洁。 例如&#xff0c;假设有以下HTML结构&#xff1a; <div class"…

Qt 加载图片的几种方式 以及加载 loading

项目中经常使用加载图片&#xff1a; 常用有两种方式&#xff1a; 1.使用 QWidget 加载图片&#xff1a; 效果&#xff1a; 样例源码&#xff1a; int pict_H ui->widgetImage->height();int pict_W ui->widgetImage->width();ui->widgetImage->setFixe…

白骑士的C语言教学高级篇 3.4 C语言中的算法

算法是解决问题的核心。无论是排序、搜索&#xff0c;还是递归与动态规划&#xff0c;算法的选择和实现对程序的效率和性能有着重要影响。本节将介绍几种常见的算法&#xff0c;包括排序算法、搜索算法&#xff0c;以及递归和动态规划的应用。 排序算法 排序算法是将一组数据按…

昇思25天学习打卡营第17天|SSD目标检测

学AI还能赢奖品&#xff1f;每天30分钟&#xff0c;25天打通AI任督二脉 (qq.com) SSD目标检测 模型简介 SSD&#xff0c;全称Single Shot MultiBox Detector&#xff0c;是Wei Liu在ECCV 2016上提出的一种目标检测算法。使用Nvidia Titan X在VOC 2007测试集上&#xff0c;SSD…

使用 CloudWatch + SNS + Lambda 实现多渠道告警系统

1. 简介 在现代云计算环境中,及时和有效的监控告警对于维护系统的稳定性至关重要。本文将介绍如何使用 AWS CloudWatch、Simple Notification Service (SNS) 和 Lambda 函数构建一个多渠道告警系统,包括邮件告警、钉钉机器人告警和电话语音告警。 2. 系统架构 整个系统的工…

利用border绘制三角技巧

绘制三角形的效果如图 <html lang"zh-cn"> <head><meta charset"UTF-8"><title>demo</title><style>* {margin: 0;padding: 0;}.box {/* 盒子宽高改成零就变成三角形 &#xff0c;需要哪个方向的三角形就设置哪个方向…

Python一些可能用的到的函数系列130 UCS-Time Brick

说明 UCS对象是基于GFGoLite进行封装&#xff0c;且侧重于实现UCS规范。 内容 1 函数 我发现pydantic真是一个特别好用的东西&#xff0c;可以确保在数据传递时的可靠&#xff0c;以及对某个数据模型的描述。 以下&#xff0c;UCS给出了id、time相关的brick映射&#xff0…

【分布式系统五】监控平台Zabbix实际监控运用(命令+截图详细版)

目录 一.Zabbix 监控 Windows 1.安装zabbix 2.Web 页面添加主机&#xff0c;关联模板 二.Zabbix 监控 Java 应用 1.安装tomcat 2.服务端安装 zabbix-java-gateway 3.Web 页面添加主机&#xff0c;关联模板 三.Zabbix 监控 SNMP 1.服务端安装 snmp 监控程序 2.修改 sn…

RT-Thread和freeRTOS启动流程

一. freeRTOS启动流程 二. RT-Thread启动流程 因为RT-Thread中我们定义了补丁函数也叫做钩子函数--$Sub$$main()--作为一个新功能函数&#xff0c;可以将原有函数劫持下来&#xff0c;并在之后的程序运行中加上$Super $ $前缀来重新调用原始函数。 所以启动流程是$Sub$$main(…

Chiasmodon:一款针对域名安全的公开资源情报OSINT工具

关于Chiasmodon Chiasmodon是一款针对域名安全的公开资源情报OSINT工具&#xff0c;该工具可以帮助广大研究人员从各种来源收集目标域名的相关信息&#xff0c;并根据域名、Google Play应用程序、电子邮件地址、IP地址、组织和URL等信息进行有针对性的数据收集。 该工具可以提…

利用node连接mongodb实现一个小型后端服务系统demo

http 请求 实现get请求数据库数据&#xff1b;实现添加数据实现编辑数据实现删除数据实现导出txt文件、Excel文件实现查询数据库数据并利用导出为excel文件 node 版本 16.16.0 node 版本 18.16.0 会连接 MongoDB 数据库错误。 Connected to MongoDB failed MongoServerSele…

Nginx-简介

介绍 nginx是一款HTTP和反向代理服务器、邮件代理服务器和通用TCP/IP代理服务器&#xff0c;在俄罗斯广泛使用&#xff0c;用于代理高负载站点。 版本 nginx开源版nginx plus企业版openresty将nginx和lua脚本结合 tengine更稳定、高性能 正向代理 客户端和代理服务是一伙的…

【vue动态组件】VUE使用component :is 实现在多个组件间来回切换

VUE使用component :is 实现在多个组件间来回切换 component :is 动态父子组件传值 相关代码实现&#xff1a; <component:is"vuecomponent"></component>import componentA from xxx; import componentB from xxx; import componentC from xxx;switch(…

生产力工具|viso常用常见科学素材包

一、科学插图素材网站 一图胜千言&#xff0c;想要使自己的论文或重要汇报更加引人入胜&#xff1f;不妨考虑利用各类示意图和科学插图来辅助研究工作。特别是对于新手或者繁忙的科研人员而言&#xff0c;利用免费的在线科学插图素材库&#xff0c;能够极大地节省时间和精力。 …

Python字符编码检测利器: chardet库详解

Python字符编码检测利器: chardet库详解 1. chardet简介2. 安装3. 基本使用3.1 检测字符串编码3.2 检测文件编码 4. 高级功能4.1 使用UniversalDetector4.2 自定义编码检测 5. 实际应用示例5.1 批量处理文件编码5.2 自动转换文件编码 6. 性能优化7. 注意事项和局限性8. 总结 在…

【代码随想录】【算法训练营】【第58天】 [卡码110]字符串接龙 [卡码105]有向图的完全可达性 [卡码106]岛屿的周长

前言 思路及算法思维&#xff0c;指路 代码随想录。 题目来自 卡码网。 day 59&#xff0c;周五&#xff0c;继续ding~ 题目详情 [卡码110] 字符串接龙 题目描述 卡码110 字符串接龙 解题思路 前提&#xff1a; 思路&#xff1a; 重点&#xff1a; 代码实现 C语言 […