<template>
	<view class="bacground-model-one">
		<swiper class="swiper-style" current="0" @change="changeItem">
			
			<swiper-item class="swiper-item-style" v-for="(images,idx) in imgList" :key="idx">
				<movable-area class="swiper-item-style" :scale-area='isScale'>
					<movable-view class="swiper-item-style" :scale-value='sca_val'    out-of-bounds='false' friction='1' inertia='true' animation='true' :scale='isScale' scale-min='1' scale-max='1.6' x="0" y="0" direction="all" >
				         <image :src="images.url" mode=""></image>
				    </movable-view>
				</movable-area>
			</swiper-item>

		</swiper>
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				sca_val:1,
				isScale: true,
				imgList: [{url:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3626606771,843873389&fm=26&gp=0.jpg",sca_val:1},
				{url:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2827471950,3102544597&fm=26&gp=0.jpg",sca_val:1},
				{url:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1079471900,3150741739&fm=26&gp=0.jpg",sca_val:1}]
			}
		},
		created(){
			that = this;
			},
		methods: {
			changeItem(e){
				console.log("下标",e.detail.current)
				console.log("下标详情",e)
				if(that.sca_val==1){
					that.sca_val = 1.01
				}else{
					that.sca_val = 1
				}
			}
		},
		onShow(){
			
		}
	}
</script>

<style>
	.bacground-model-one{
		width: 100%;
		height: 1000px;
	}
	.swiper-style{
		width: 100%;
		height: 100%;
	}
	.swiper-item-style{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.number-style{
		width: 100px;
		height: 50px;
	}

</style>

关注我的公众号SpaceObj 领取idea系列激活码

posted on 2023-05-11 09:52  张伯灵  阅读(90)  评论(0编辑  收藏  举报