uniapp卡片式轮播图

最新推荐文章于 2024-08-07 20:58:21 发布

牛油的果

最新推荐文章于 2024-08-07 20:58:21 发布

阅读量700

点赞数

分类专栏： uniapp 文章标签： uni-app javascript 前端 css html

本文链接：https://blog.csdn.net/weixin_57633124/article/details/130576273

版权

uniapp 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

轮播图可自动滑动,定时滑动

1.html(里面可以自己设置图片或者内容)

		<!-- 轮播图中的属性类型默认值
		    autoplay  是否自动切换  值是(false)-->
<swiper  class="topbanner"    autoplay="true" :display-multiple-items="2" previous- 
       margin="305rpx" @change="swiperchange" :current="current" :circular="true" 
       :interval="3000" :duration="1500">
<swiper-item v-for="(item ,index) in info" :key="index"   >
			<view  class="swiper-item" >
			    <view class="benftr_block">
					<view class="benftr_text">{{item.name}}</view>
				</view>
			</view>
</swiper-item>

2.css代码(根据自己的页面更改相应代码)

.topbanner{
		height: 200rpx;
		
}
.swiper-item{
            /* overflow: auto; */
			/* height: 160%; */
			transform: scale(0.8);
			transition:all 0.5s ease;
			text-align: center;
			transition: all 0.5s ease-in-out;
			margin-top: 58rpx;
			width: 100rpx;
			background-color: deepskyblue;
		}
.benftr_block{
	position: absolute;
	width: 160rpx;
	height: 119rpx;
	background: #EE2747;
	box-shadow: 0rpx 4rpx 9rpx 0rpx rgba(202,202,202,0.15);
	border-radius: 18rpx; 
}
.benftr_text{
	height: 25rpx;
	font-size: 18rpx;
	font-weight: bold;
	color: #fff;
	line-height: 21rpx;
	letter-spacing: 2px;
	margin-top: 47rpx;
}

3.js代码(这里,在页面上显示的文字用数组来返回)

<script>
	export default {
		data() {
			return {
				current:0,
				info:[
					{
						name:"GIVENCHY"	
					},
					{
						name:"BENFTR"	
					},
					{
						name:"AMRNIE"
					},
					{
						name:"BEBERTY"
					},
					{
						name:"GIVENCHY"	
					},
					{
						name:"BENFTR"	
					},
					{
						name:"AMRNIE"
					},
					{
						name:"BEBERTY"
					}
				],
			
			}
		},
       
	
		methods: {
			swiperchange(e){
				this.current=e.detail.current
			}
		}
	}
</script>

如有错误,请各位大佬不吝赐教~~