记录一个移动端图片预览（支持旋转），使用css强制旋转的坑
Posted 小星星
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了记录一个移动端图片预览（支持旋转），使用css强制旋转的坑相关的知识，希望对你有一定的参考价值。
注：我并没有解决 只是换了一个插件,记录一下问题
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" :>
<div class="preview-indicator"> indexPreview + 1 / images.length </div>
<div class="preview_rotate" @click="hanleRotate(\'旋转\')" >
<img src="@/assets/img/taskList/xuanzhuan@2x.png" >
</div>
<span class="preview_close" @click="hanleClose">退出全屏</span>
<div : class="preview_left" @click="handleSwipePreview(\'prev\')">
<img src="@/assets/img/examList/prev.png" >
</div>
<div : class="preview_right" @click="handleSwipePreview(\'next\')">
<img src="@/assets/img/examList/next.png" >
</div>
</div>
</template>
</van-image-preview>
以上是关于记录一个移动端图片预览（支持旋转），使用css强制旋转的坑的主要内容，如果未能解决你的问题，请参考以下文章