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

已于 2024-07-01 09:19:28 修改
阅读量446 收藏 3
点赞数 3
文章标签： 媒体 前端 javascript
于 2024-06-30 22:07:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80735340/article/details/140085033
版权

图片组件（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>

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

2301_80735340
关注
微信小程序 - 详细实现各种样式 swiper 轮播图组件大全，适用于各种场景和样式要求的轮播图，支持竖向卡片轮播图类型、横向侧滑(左右两侧的图片能看到一点边角)类型、无缝滚动衔接、带左右箭头手动切换
王佳斌
07-15 2537
微信小程序，wechat，vue.js，轮播图，swiper，swiper轮播图，微信小程序实现竖向卡片式的轮播图，如何做无缝滚动衔接的轮播图，轮播图类型，轮播图大全，各种常见轮播图示例源码，源代码，可直接复制，比例轮播图，个性轮播图，实现基于swiper 常见轮播图轮子大全，vue竖立轮播图，垂直轮播图，实现图片竖直方向的轮播，vue 垂直滚动轮播图，图片立体轮播，2D轮播图，3D轮播图，左右露出一点图片的轮播图，如何使用swiper制作露边轮播图，中间大两边小的轮播图效果，重叠轮播，swiper倾斜图片
小程序中swiper与image的使用
Zhencode的博客
09-03 423
小程序中swiper与image的使用
小程序开发-swiper 组件的常用属性-image 组件的 mode 属性
qq_45811054的博客
03-24 795
swiper 组件的常用属性-image 组件的 mode 属性
设置swiper中的image宽高
李小狮
11-13 3198
微信小程序-组件-视图容器-swiper swiper 最外层用一个view包裹 要设置image图片，要再swiper设置宽高和image本身设置宽高才有效 不要在swiper-item中设置宽高，是无效的 swiper-item在swiper 中，宽高自动设置是100% <view> <swiper style="width:100%;height:460rpx"> <swiper-item> <image style="width
微信小程序使用widthFix或heightFix时先加载并显示原始图片的大小后再进行缩放导致出现短暂错位的问题
m0_50865164的博客
08-14 2115
我们知道，在微信小程序的image组件中，有widthFix属性和heightFix属性,但是，使用了这两种属性后，在页面加载的过程中会先将图片的原始尺寸显示出来再进行缩放，这样会导致与image组件同处一个盒子的其他组件出现短暂的错位，影响界面美观。 解决方法：  在wxss样式中将图片的初始高度或宽度置为0即可(使用widthFix则将高度置为0,heightFix则将宽度置为0)。代码如下: /* image的 mode为 widthFix */ image { height: 0; } /
小程序swiper间距效果
weixin_54858833的博客
04-10 2067
描述 很久没写过小程序了，今天遇到个问题，小程序的swiper怎么实现间距轮播呢？ 类似以下效果 黄色部分为内容 灰色为间距 我给每个swiper-item设置了margin 发现没有作用，去文档看了swiper的属性 这个也尝试了，可能是我算的不对，完全没用啊！ 但是，我想到一个更容易实现但容易被忽略的办法！ 解决 想了很久的问题，就差那么一点灵性！ 答案就是，再包一层view缩小宽度！ 我真是天才！ ...
微信小程序使用swiper组件实现层叠轮播图
10-17
以下是一个简单的示例，首先在wxml文件中定义Swiper轮播组件的结构： ```xml <view class="banner-swiper"> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" current="{{swiperCurrent...
微信小程序之swiper轮播图中的图片自适应高度的方法
12-02
在微信小程序开发中，轮播图（Swiper）是一个常用组件，用于展示多张图片或内容的自动切换效果。然而，默认情况下，Swiper组件的高度是固定的150px，这可能导致图片不能自适应不同分辨率的屏幕，特别是当图片的高度...
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
10-17
从给定的文件内容来看，要实现一个非swiper组件的自定义伪3D轮播图效果，需要对微信小程序的事件响应机制和WXML、WXSS文件中的元素属性动态操作有较为深入的理解。 首先，我们来看一下伪3D轮播图的实现逻辑。轮播图...
微信小程序 swiper 组件实现层叠轮播图，同时在轮播图中自定义信息
03-24
Swiper组件是微信小程序中用于创建滑动轮播效果的关键组件，适用于展示多张图片或者卡片信息。本文将详细介绍如何利用Swiper组件实现层叠轮播图，并自定义指示点样式以及图片描述信息。 首先，我们需要了解Swiper...
微信小程序image组件的mode总结+介绍（包含heightFix）
fangyuan__的博客
03-22 9005
<image src="http://img1.gtimg.com/comic/pics/hv1/106/212/2174/141418516.jpg" class='in-image' mode='scaleToFill'> </image> <image src="http://img1.gtimg.com/comic/pics/hv1/106/212/2174/141418516.jpg" class='in-image' mode='aspectFit'>
Uni-app中swiper组件图片（image）不显示的问题
H20220803的博客
11-27 2866
Uni-app中swiper组件图片（image）不显示的问题
uni-app框架swiper里面图片大小自适应问题（5+app端无法适应问题）
Yfw的博客
08-28 1万+
uni-app 程序示例 图片显示采用了image组件，设置image组件的scaleToFill模式（不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素） swiper布局代码： <view class="uni-margin-wrap"> <swiper class="swiper" :indicator-dots="indicatorDots" :a...
微信小程序 轮播图 swiper图片组件
热门推荐
dzp_coder
10-13 10万+
照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了,上图. 上图就是一个简易的轮播图,是不是很简易.23333 主要是代码也很简单. 1.index.wxml
小程序image标签的mode属性
weixin_42442890的博客
02-11 5225
image标签的mode属性 用处：用于设置图片剪裁、缩放模式 值 说明 aspectFit 保持图片宽高比缩放，保证长短边都显示完整 aspectFill 保持图片宽高比缩放，保证短边显示完整，长边被截取 scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽...
【微信小程序】图片被压扁怎么办？在image中添加 mode="widthFix"
神创的博客
03-19 3万+
参考：http://www.jb51.net/article/116779.htm下面这里参数是错的，不能用heightFix官方说明：http://www.jb51.net/article/116771.htm------------------------------------------------------...
微信小程序swiper组件实现图片宽度自适应
小朱
06-28 2万+
imageLoad: function () { this.setData({ imageWidth: wx.getSystemInfoSync().windowWidth,//图片宽度 imgUrls: [ { image: "http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.
Swiper3 写一个轮播图
Martin 的博客
07-17 2258
女朋友需要在移动端实现一个轮播，她没找到合适的。 ， 。 我也是服气   直接上代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;轮播啊轮播&lt;/title&gt; &lt;style&gt; .swiper-container { width: 60...
vue swiper 轮播图片 文字
最新发布
05-09
Vue Swiper是一个基于Vue的轮播组件，它能够轻松地创建一个响应式的轮播图。它支持自定义样式、自动播放、手动控制、循环播放、分页器等功能。你可以在Swiper中添加图片和文字，实现轮播图片和文字的效果。 下面是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值