首页 > 其他分享 >记录一个移动端图片预览(支持旋转),使用css强制旋转的坑

记录一个移动端图片预览(支持旋转),使用css强制旋转的坑

时间:2023-03-03 10:02:35浏览次数:43  
标签:预览 旋转 touch ImagePreview 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" :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>

标签:预览,旋转,touch,ImagePreview,css,图片
From: https://www.cnblogs.com/Mar-/p/17174515.html

相关文章

  • css隐藏滚动条
    css如何隐藏div区域的超出滚动条,但仍保持滚动功能呢?这里给出我的方法:这里是div滚动区域html代码,scroll-box是产出自动滚动区域,如下:<divclass="scroll-box"><div......
  • CSS选择器权重
    原文链接:​   ​​https://note.noxussj.top/?source=51cto​​选择器权重划分代表有多个选择器同时选中同一个元素时,应该以谁的为准,这里就会涉及到权重的问题。现实生活......
  • uni.scss
    /***这里是uni-app内置的常用样式变量**uni-app官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量*如果你是插件开发者,建议你......
  • js图片随鼠标移动,旋转,缩放
    效果如图,图片可以跟随鼠标移动,旋转,拉伸,代码在谷歌浏览器和IE11验证了,其他浏览器没试过本博客源码: https://github.com/shengbid/vue-demo 把这个功能放在vue项目......
  • Viewer.js实现移动端图片预览,旋转
    1、安装npminstallv-viewer--save2、main.js中引入importViewerfrom'v-viewer'import'viewerjs/dist/viewer.css'//如果需要修改viewer的css可以创建一个css......
  • HTML-CSS常用代码
    注释标签:对代码进行说明<!--单行注释,也可以对多行文字进行注释-->常用格式标签<b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除线</s> <p>段落标签</p> <hr>:分割线 <br>......
  • 系统化学习前端之CSS
    前言CSS层叠样式表,之所以是层叠,是因为在CSS中,后写的样式(权重高)是可以覆盖之前(权重低)的相同样式的。HTML可以书写页面内容,CSS则负责排版和美化页面内容,使得用户能够......
  • CSS 盒子模型
    CSS盒子模型(BoxModel)所有HTML元素可以看作盒子,在CSS中,"boxmodel"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填......
  • CSS 数学函数与容器查询实现不定宽文本溢出跑马灯效果
    在许久之前,曾经写过这样一篇文章--不定宽溢出文本适配滚动。我们实现了这样一种效果:文本内容不超过容器宽度,正常展示文本内容超过容器的情况,内容可以进行跑马灯来回滚......
  • CSS全局关键字
    css的全局关键字有下面几个:inherit:继承父级属性initial:将元素初始化成css的初始值unset:继承和初始化元素revert:还原到浏览器内置样式all:代指所有css属性下面分......