uniapp小程序旋转木马轮播图banner

痞子Monkey

已于 2022-06-14 15:58:30 修改

阅读量935

点赞数 2

文章标签：小程序 uni-app

于 2021-08-10 14:32:52 首次发布

本文链接：https://blog.csdn.net/weixin_42065713/article/details/119569033

版权

下图这样的：

HTML

<view class='banner_top'>
	<swiper class='swiperClass' :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" :circular="circular" circular previous-margin="120rpx" next-margin="120rpx" @change="bindchange">
		<block v-for="(item,index) in imgUrls">
			<swiper-item class="swiper-item ">
				<image :src="item" :class="swiperIndex == index ? 'active,slide-image' : 'quiet,slide-image'" mode='scaleToFill' />
			</swiper-item>
		</block>
	</swiper>
</view>

JS

export default {
		data() {
			return {
                indicatorDots: false, //是否显示面板指示点
				vertical: false, //滑动方向是否为纵向
				autoplay: true, //是否自动切换
				interval: 2000, //自动切换时间间隔
				duration: 500, //滑动动画时长
				circular: true,//是否采用衔接滑动
                imgUrls: [
                    //放入图片
					'../../static/goods/banner.jpg',
					'../../static/goods/banner.jpg',
					'../../static/goods/banner.jpg',
					'../../static/goods/banner.jpg',
				],

				swiperIndex: 0
            }
        },
        methods: {
            bindchange(e) {
				this.swiperIndex = e.detail.current
			},
    }
}

CSS

<style lang="scss">

// 轮播图
	.banner_top {
		height: 300rpx;
		background: #DD6C26;
		width: 100%;
		padding-top: 10rpx;
		padding-bottom: 10rpx;

		.swiperClass {
			margin: 0;
			width: 100%;
			height: 100%;
		}

		.slide-image {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}

		.swiper-item image {
			width: 100%;
			height: 100%;
		}

		.swiper-item image.active {
			transform: none;
			transition: all 0.2s ease-in 0s;
		}

		.swiper-item image.quiet {
			transform: scale(0.8333333);
			transition: all 0.2s ease-in 0s;
		}
	}

</style>