博客

先来看看效果

滑到的就放大，且一个屏幕可以显示其他item的部分内容

<swiper previous-margin='28px' next-margin='28px'      @change="change"
		>
			<block v-for="(item,index) in list" :key="index" >
				<swiper-item>
					<view class="box"
					 :animation="index == currentIndex?animationData:animationData2">
						<!-- 图片 -->
						<view class="imgcot">
							<image :src="item.image" mode="widthFix"></image>
						</view>

					</view>
				</swiper-item>
			</block>
</swiper>

previous-margin:前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值

next-margin:后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值

@change:当图片改变时会触发 change 事件

data中数据

data() {
			return {
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念'
					}
		],
		currentIndex:0,
		animationData: {},
		animationData2: {},
}

methods

methods: {
           change(e){
			   this.currentIndex = e.detail.current
		   },
	},

computed

	// 收缩
		stretch() {
		   var animation = uni.createAnimation({
		     duration: 400,
		     timingFunction: 'ease',
		   })
		   animation.scale(1).step()
		   this.animationData =  animation.export()
		 },
		 // 展开
		 shrink(h) {
		    var animation2 = uni.createAnimation({
		      duration: 400,
		      timingFunction: 'ease',
		    })
		    animation2.scale(0.94).step()
		    this.animationData2 =  animation2.export()
	},

如果呢，你想让别的一些东西滑动的时候，这个图片跟着滑动的话，给swiper动态绑定current即可