注:我并没有解决 只是换了一个插件,记录一下问题
1、需求要支持图片预览和旋转 ,
<1>我选择是vant组件自带的ImagePreview 图片预览,用的css强制实现旋转,
<2>出现的问题是 样式可以旋转 但是 touch事件没有旋转,
<3>导致现象是,旋转后 放大后滑动图片,向右滑动-图片向下偏移,左-上,上-右,下-左。
<4>搜索一下答案 解决办法是: 判断touch事件移动方向 手动设置想要的偏移位置,但是我没有实现。
<5>最后改为使用viewer.js实现需求功能
<6>ImagePreview 实现图片预览的代码
点击查看代码
<van-image-preview :loop="swipePlayState==='2'?true:false" :start-position = "current" ref="imagePreview" :min-zoom="1/3" class="preview_box" v-model:show="show" :images="images" @change="handleChange">
<template v-slot:index>
<div class="image_preview_box" :style="{top:(clientHdetail - 50 ) + 'px'}">
<div class="preview-indicator">{{ indexPreview + 1 }}/{{ images.length }}</div>
<div class="preview_rotate" @click="hanleRotate('旋转')" style="color:red">
<img src="@/assets/img/taskList/[email protected]" alt="">
</div>
<span class="preview_close" @click="hanleClose">退出全屏</span>
<div :style="{top: - (clientHdetail/2 - 28) + 'px'}" class="preview_left" @click="handleSwipePreview('prev')">
<img src="@/assets/img/examList/prev.png" alt="">
</div>
<div :style="{top: - (clientHdetail/2 - 28) + 'px'}" class="preview_right" @click="handleSwipePreview('next')">
<img src="@/assets/img/examList/next.png" alt="">
</div>
</div>
</template>
</van-image-preview>