uniapp使用swiper组件实现3D轮播效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp使用swiper组件实现3D轮播效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

使用uniapp 中的 swiper组件实现一个3D轮播图

关键属性：

1. circular: 采用衔接滑动

2.previous-margin: 前边距，用于露出前一项的一小部分

3.next-margin: 后边距,用于露出后一项的一小部分

效果图：

swiper实现3d轮播,uni-app,前端文章来源地址https://www.toymoban.com/news/detail-605354.html

实现代码：（vue3）

<template>
  <view>
	<swiper
      class="header"
      circular
      previous-margin="37%"
      next-margin="200rpx"
      :current="current"
      @change="changeIndex"
    >
      <swiper-item v-for="(item, index) in 3" :key="index">
           <!-- 当前所在滑块的 index == index 放大 -->
        <view :class=" current === index ? 'slide-image active' : 'slide-image quiet'">
		{{ index + 1}}
          <image src="https://img2.baidu.com/it/u=4009897966,3530127318&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1680714000&t=824d94b54acd7bc56f67ebca3347cabb"> </image>
		</view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup>
import { ref } from 'vue';
// 滑动索引
const current = ref(0)
const changeIndex = (e) => {
  current.value = e.detail.current
}
</script>

<style lang='scss' >
.header {
	box-sizing: border-box;
	width: 96%;
	height: 300rpx;
	margin: 50% auto;
	background-color: #2a425f;
	box-shadow: 3px 7px 10px 0px rgb(66, 89, 104,1);
	color: #fff;
	border-radius: 10rpx;
  .slide-image {
    width: 200rpx;
    height: 180rpx;
    margin-top: 10%;
	image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
  }

  .active { 
	// 中间放大动画
    transform: none;
    transition: all 0.2s ease-in 0s;
  }

  .quiet {
	// 两边缩小动画
    transform: scale(0.7);
	opacity: 0.4;
    transition: all 0.5s ease-in 0s;
  }
}

</style>

到了这里，关于uniapp使用swiper组件实现3D轮播效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！