Uniapp实现swiper滑到每一项放大缩小，一排多个显示

最新推荐文章于 2024-09-24 14:18:19 发布

原创

最新推荐文章于 2024-09-24 14:18:19 发布 · 6.7k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#uniapp #swiper

这篇博客介绍了如何利用Swiper组件实现滑动时图片放大，并露出相邻项部分内容的效果。通过设置`previous-margin`和`next-margin`属性，以及监听`change`事件来改变图片的缩放状态。同时，利用uni-app的动画API创建了收缩和展开的动画效果。内容中还提供了相关的数据结构和方法实现。

先来看看效果

在这里插入图片描述

滑到的就放大，且一个屏幕可以显示其他item的部分内容

<swiper previous-margin='28px' next-margin='28px'      @change="change"
		>
			<block v-for="(item,index) in list" :key="index" >
				<swiper-item>
					<view class="box"
					 :animation="index == currentIndex?animationData:animationData2">
						<!-- 图片 -->
						<view class="imgcot">
							<image :src="item.image" mode="widthFix"></image>
						</view>

					</view>
				</swiper-item>
			</block>
</swiper>

previous-margin:前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值

next-margin:后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值

@change:当图片改变时会触发 change 事件

data中数据