<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系列激活码