<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   张伯灵  阅读(101)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)



点击右上角即可分享
微信分享提示