需求:uni-app图片预览组件实现图片大图预览双指缩放功能
<template>
<view class="preview-pic" @click.stop="close">
<movable-area scale-area>
<movable-view class="pic" direction="all" @scale="onScale" scale="true" scale-min="1" scale-max="4" :scale-value="scale">
<image :src="src" mode="widthFix"></image>
</movable-view>
</movable-area>
</view>
</template>
<script>
export default {
name: 'PreviewPic',
props: {
src: {
type: String,
required: true
}
},
data() {
return {
scale: 1, // 0.5 -10 缩放的倍数
};
},
methods: {
close() {
this.$emit('close')
},
onScale() {
console.log('双指缩放')
}
}
}
</script>
<style lang="less" scoped>
.preview-pic {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 2021;
background-color: #000000;
movable-area {height: 100%;
width: 100%;
}
movable-view image {
width: 100%;
}
.pic {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
display: flex;
background-color: #000000;
image {
width: 100%;
}
}
}
</style>