【样式】轮播图样式 uview 版本 : “2.0.31“

最新推荐文章于 2024-03-28 11:05:39 发布

嘿，小苹果

最新推荐文章于 2024-03-28 11:05:39 发布

阅读量362

点赞数

分类专栏： uniapp 样式集合文章标签： css css3 html

本文链接：https://blog.csdn.net/AAAXiaoApple/article/details/129202707

版权

uniapp 同时被 2 个专栏收录

21 篇文章 2 订阅

订阅专栏

样式集合

9 篇文章 0 订阅

订阅专栏

![在这里插入图片描述](https://img-blog.csdnimg.cn/6cd568ce932b4ea7ae52f10365979680.png

html

<view class="addSwiperdiv">
				<image src="@/static/66.png" mode="aspectFill" class="titleimg"></image>
				<view class="addcontent">
					<u-swiper 
					:list="list1" 
					imgMode='aspectFill' 
					circular
					height='308rpx' 
					@change="e => current = e.current"
					@click="clickSwiper('/pagesA/pages/youxuan/youxuan')">
					</u-swiper>
					<view class="indicator" slot="indicator">
						<view class="indicator__dot" v-for="(item, index) in list1" :key="index"
							:class="[index == current && 'indicator__dot--active']">
						</view>
					</view>
				</view>

			</view>

css

.addSwiperdiv {
			width: 336rpx;
			height: 446rpx;
			border-radius: 16rpx;
			background: linear-gradient(135deg, #C82920 0%, #CB1F1F 100%);
			position: relative;

			.titleimg {
				width: 242rpx;
				height: 34rpx;
				position: absolute;
				top: 28rpx;
				left: 48rpx;
				right: 48rpx;
			}

			.addcontent {
				position: absolute;
				top: 84rpx;
				left: 14rpx;
				right: 14rpx;
				bottom: 54rpx;
				width: 308rpx;
				height: 308rpx;
				background: #FFF9F9;
				border-radius: 16rpx;
			}
		}
		.indicator {
	// @include flex(row);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 24rpx;

	&__dot {
		height: 6px;
		width: 6px;
		border-radius: 100px;
		background-color: rgba(255, 255, 255, 0.35);
		margin: 0 5px;
		transition: background-color 0.3s;

		&--active {
			background-color: #ffffff;
		}
	}
}