uniapp图片放大缩小预览，并支持图片拖动附效果图

效果图：

放大缩小和拖动是根据 movable-area 组件来实现的，小程序和uniapp都支持这个组件。

movable-area | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/component/movable-area.html

实现思路：

默认显示默认大小的图片，点击图片执行yulan事件从而显示放大缩小的组件，全屏显示该图片，并且能放大缩小和拖动图片。

下面上一个 uniapp 在h5场景的使用实现代码：

注：其它场景也可以根据这个思路实现，例如微信小程序

<movable-area v-if="preview" scale-area class="movable-area"><movable-view class="movable-view" direction="all" scale="true"scale-min="1" scale-max="4" :scale-value="scale" @dblclick="dblclick"><image style="width:100%;" class="" src="https://t8.baidu.com/it/u=96305556,1111032089&fm=218&app=137&size=f242,150&n=0&f=JPEG&fmt=auto?s=7BA38345CA621105781C74C90300C013&sec=1654707600&t=535dded2895f5349c5f6abdec4536f01" mode="widthFix"></image></movable-view><button @click="preview=false">返回直播</button></movable-area><image @click="yulan"src="https://t8.baidu.com/it/u=96305556,1111032089&fm=218&app=137&size=f242,150&n=0&f=JPEG&fmt=auto?s=7BA38345CA621105781C74C90300C013&sec=1654707600&t=535dded2895f5349c5f6abdec4536f01" mode="widthFix"></image>

data() {return {scale: 1,current: '',preview: false,}},methods: {// 预览图片yulan(current) {this.current = current;this.scale = 1;this.preview = true;},//双击事件放大缩小dblclick() {if (this.scale == 4) {this.scale = 1;} else {this.scale = 4;}},}

css

.movable-area {position: fixed;z-index: 99999;left: 0;top: 0;width: 100vw;height: 100vh;background-color: #d8d8d8;}.movable-view {width: 100vw;height: 90vh;justify-content: center; /*子元素水平居中*/align-items: center; /*子元素垂直居中*/display: -webkit-flex;}.swiperImg {height: 80%;}

uniapp图片放大缩小预览，并支持图片拖动附效果图相关推荐

Css+Jquery实现点击图片放大缩小预览图片预览查看大图
要求点击一张图片,图片就会放大,查看大图,点击空白处就会隐藏大图,回到缩略图. 技术要点主要是Jquery进行元素的显示与隐藏. 代码 <!DOCTYPE html> <html ...
uni-app上传图片(选择，预览，删除图片)
用uni-app做项目时,上传图片的功能需求应该是在正常不过的了.最近有几个项目都有遇到,所以想总结一下.所用到的api都很简单. 功能需求功能需求如列表所示,视图展现如图所示,代码如下.点击相框按 ...
使用element-ui的el-image图片预览功能支持图片下载
项目场景: 工作中我们常用会到 vue+element,其中预览组件难免会涉及到下载功能,或者其它扩展功能,但是el-image 支持的只是简单放大旋转功能,解决方法要么修改组件,要么通过 j ...
uniapp上传、预览、删除图片
效果图如下: 代码如下所示: <template><view class="upload-img"><image src="/static/ ...
html怎么显示返回的图片,想要预览文件或是图片，将后端返回的信息转换为前端可以正常显示的格式...
文件.图片在后端主要以两种方式存储: 1.保存在服务器上,数据库中存储的是该文件.图片的地址: 2.将文件.图片转为二进制流,数据库中存储的是对应的二进制流. 针对第一种情况的话,直接请求接口获取到对 ...
html鼠标移动时图片放大缩小,JS与CSS3实现图片响应鼠标移动放大效果示例
本文实例讲述了JS与CSS3实现图片响应鼠标移动放大效果.分享给大家供大家参考,具体如下: 今天看网易的网站上,当我把鼠标放上去的时候发现图片放大,移开图片缩小,于是自行尝试,结果如下. 方法一:使用 ...
html5手指滑动图片放大缩小,移动端如何实现图片通过捏合手势放大缩小呢？
/* * @Author 兔爷 * @function 实现单指拖动图片,双指缩放图片 * @marks 参数one是为了区分屏幕上现在是一根手指还是两根手指,因为在滑动的时候两根手指先离开一根会触发 ...
js 图片放大缩小（动画效果）
本文实现鼠标滑过图片事件,鼠标滑到图片上则图片逐渐放大,鼠标划走图片逐渐缩小到原大小.下面分析整个过程: 图片逐渐放大缩小怎么实现? 1.用css设置图片的宽和高的不同值可以实现大小不同的图片,那么通 ...
移动端查看预览图片放大缩小
方法一之前介绍过一款移动端vue适用的插件大全 https://blog.csdn.net/MtangEr/article/details/85339092 里边有一篇是查看图片放大缩小的 htt ...

uniapp图片放大缩小预览，并支持图片拖动附效果图

uniapp图片放大缩小预览，并支持图片拖动附效果图相关推荐

最新文章

热门文章