Uniapp swiper插件实现轮播图和轮播消息

Uniapp swiper实现轮播图和轮播消息

属性	默认值	作用
circular	false	是否采用衔接滑动
autoplay	false	是否自动切换
mode		物品裁剪、缩放的模式
aspectFill		保持纵横比缩放图片，只保持图片的短边能完全显示出来
interval	5000	自动切换时间间隔
duration	500	滑动动画时长
vertical		滑动方向是否为纵向
indicator-dots	false	面板指示点的显示
indicator-color		指示点颜色
indicator-active-color	#000000	当前选中的指示点颜色

template代码

<template>
	<view class="homeLayout">
		<!-- 轮播图 -->
		<view class="banner">
			<swiper circular indicator-dots indicator-color="rgba(255,255,255,0.5)"
			indicator-active-color="#fff" autoplay>
				<swiper-item v-for="item in bannerList" :key="item._id">
					<image :src="item.picurl" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 公告轮播图 -->
		<view class="notice">
			<!-- 左侧图标 -->
			<view class="left">
				<uni-icons type="sound-filled" size="20" color="#28b389"></uni-icons>
				<text class="text">公告</text>
			</view>
			<view class="center">
				<swiper vertical autoplay interval="1500" duration="300" circular>
					<swiper-item v-for="item in noticeList" :key="item._id">
						{{item.title}}
					</swiper-item>
				</swiper>
			</view>
			<!-- 右侧箭头 -->
			<view class="right">
				<uni-icons type="right" size="16" color="#333"></uni-icons>
			</view>
		</view>
	</view>
</template>

css样式

scss插件可以在插件商场里下载

<style lang="scss" scoped>
	.homeLayout{
		//轮播图样式
		.banner{
			width: 750rpx;
			padding: 30rpx 0;
			
			swiper{
				width: 750rpx;
				height: 340rpx;
				
				&-item{
					//讨论&-item的含义
					width: 100%;
					height: 100%;
					padding: 0 30rpx;
					
					image{
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
					
				}
			}
		}
		//公告的样式
		.notice{
			width: 690rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #f9f9f9;
			margin: 0 auto;
			border-radius: 80rpx;
			display: flex;
			
			.left{
				width: 140rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.text{
					color: #28b389;
					font-weight: 600;
					font-size: 28rpx;
				}
			}
			.center{
				//可以理解为元素在弹性布局中可以均匀地分配空间，
                //既可以放大也可以缩小，
                //并且在分配多余空间之前，
                //它会占据尽可能少的空间。
				flex: 1;
				
				swiper{
					height: 100%;
					
					&-item{
						height: 100%;
						font-size: 30rpx;
						color: #666;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}
            .right{
				width: 70rpx;
				display: flex;
				align-items: center;
				justify-items: center;
			}
		}
	}
</style>

发现问题

轮播图的图转了一半。
解决方法：在App.vue文件中的style标签中添加代码

	/*每个页面公共css */
	view swiper swiper-item{
		box-sizing:border-box;
	}

最终效果