用uniapp写堆叠卡片式轮播图

最新推荐文章于 2025-02-28 17:14:31 发布

akatukijohi

最新推荐文章于 2025-02-28 17:14:31 发布

阅读量3.2k

点赞数

分类专栏：业务问题解决方案文章标签： javascript css

本文链接：https://blog.youkuaiyun.com/akatukijohi/article/details/120407482

版权

<template>
	<view class="focus" :style="{'width': width + 'rpx'}">
		<view class="ul">
			<view v-for="(item,index) in list" :key="item.id" class="li"
				:style="{'z-index': -1 * index,'width': itemWidth + 'rpx','transform':translateX(index+moving),'transition': transition,}">
				<view class="item" :style="{'transform':`scale(${1-0.1*index+scale})`,'transition': transition}"
					@transitionend="transitionend(index)">
					<view class="item-content" :style="{'opacity':index ? 1 : moving ? 0 : 1}">
						<image class="img" :src="item.url"></image>
						<view class="">
							666666666<br>
							666666
						</view>
					</view>
				</view>
			</view>
			<view class="li"
				:style="{'z-index': -1 * list.length,'width': itemWidth + 'rpx','transform':translateX(list.length+moving)}">
				<view class="item" :style="{&#