uni-app 异形轮播

梨童就是小梨童呀

已于 2023-02-03 17:39:05 修改

阅读量350

点赞数 1

分类专栏： vue js 小程序文章标签： uni-app 前端 javascript

于 2022-12-29 09:59:58 首次发布

本文链接：https://blog.csdn.net/weixin_42220039/article/details/128476860

版权

js 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

小程序

11 篇文章 0 订阅

订阅专栏

vue

10 篇文章 1 订阅

订阅专栏

html

		<view>
				<!-- previous-margin指的是当前图片的左边框距离屏幕最左边的距离 -->
				<swiper style="height: 600rpx;" previous-margin="140rpx" next-margin="140rpx" @change="handlechange" :current="mycurrent"   :indicator-dots="true"  :circular="true" :interval="3000" :duration="1000">
					<swiper-item v-for="i,index in 3" :key="i">
						<view :class="['swiper-item',index==mycurrent ? 'active' : '']">
							<img src="http://7dd-statics.7dingdong.com/data/files/store/20221104/6364d4c11ad66.jpg" style="width: 100%;height: 100%;"  alt="" srcset="">
						</view>
					</swiper-item>
				</swiper>
			</view>

data:
mycurrent:0


methods:{
		handlechange(e){
			this.mycurrent=e.detail.current
			this.posterImgdown=this.posterImg[e.detail.current]
			console.log(this.posterImg[e.detail.current],this.posterImgdown,'0000')
		},}

less

	.swiper-item{
			border-radius: 30rpx;
			overflow: hidden;
			// 像这种多张轮播图同时出现在一屏的情况下就不要指定width了，不然你会发现previous-margin和 next-margin会出现想不到的效果
			// 如果想要设置宽每一张轮播图的宽度，只需要设置previous-margin和next-margin就可以了，想要设置高度直接改下面的height就可以了
			// width: 450rpx;
			height: 85%;
			transform: scale(0.8);
			transition:all 0.5s ease;
			text-align: center;
			transition: all 0.5s ease-in-out;
			&.active{
				transform: scale(1);
			}
		}