vue H5(移动端)双指放大图片，单指拖动图片，等图片操作，使用viewerjs

1、npm 引入

npm install v-viewer --save

2、main.js配置

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'Vue.use(Viewer)// 配置项
Viewer.setDefaults({Options: {'inline': true, // 启用 inline 模式// 'button': true, // 显示右上角关闭按钮// 'navbar': true, // 显示缩略图导航// 'title': true, // 显示当前图片的标题// 'toolbar': true, // 显示工具栏'tooltip': true, // 显示缩放百分比'movable': true, // 图片是否可移动'zoomable': true, // 图片是否可缩放'rotatable': true, // 图片是否可旋转'scalable': true, // 图片是否可翻转'transition': true, // 使用 CSS3 过度'fullscreen': true, // 播放时是否全屏s// 'keyboard': true, // 是否支持键盘'url': 'data-source' // 设置大图片的 url}
})

3、使用

<viewer> <img src="../assets/tu11.jpg" /></viewer>

简单强大~实测有效~~

2022-1-6 更新

在移动端使用，双击放大图片后，无法再拖动图片，图片的左上角位置被固定，暂未解决

vue H5(移动端)双指放大图片，单指拖动图片，等图片操作，使用viewerjs相关推荐

移动端js实现双指缩放，单指拖动图片
1.可通过修改图片的宽高来缩放图片 2.可通过修改transform进行缩放图片,使用transform默认的作用中心是元素的中心点,需要通过transform-origin:0 0调整作用中心点 3 ...
移动端图片单指移动,双指放大缩小实现//touchmove的时候不让body滚动
移动端图片单指移动,双指放大缩小实现//touchmove的时候不让body滚动思路1:移动放大缩小操作都直接放到图片上面图片的放大缩小使用transform的scale属性操作,移动使用tran ...
android h5 禁止缩放,vue h5移动端禁止缩放代码
vue h5移动端禁止缩放代码安卓在index.html里面写 ios 在APP.vue里面写 window.onload = function() { document.addEventList ...
android图片双指缩放,Android图片双指缩放，单指移动实现
Android 实现,图片双指缩放,单指移动.通过自定义ImageView控件实现. ZoomDragImageView.java代码如下: public class SwZoomDragImageV ...
仿抖音视频双指缩放和单指滑动效果
最近刷抖音看视频时,对一个视频某个位置比较感兴趣,采用双指放大查看细节,然后还可以随意滑动到任何位置,比较感兴趣,决定自己来实现此效果: 分析效果:ViewPager左右滑动,视频列表上下滑动+下拉刷 ...
Android手势：单指拖动、双指缩放图片
手势其实是一个比较复杂的东西,首先是因为处理的时机.Android中触摸屏的事件其实只有ACTION_DOWN.ACTION_MOVE和 ACTION_UP这三种,当然我们实现手势的逻辑时,一般会用到 ...
h5移动端，类似qq空间、朋友圈不规则图片显示适配功能
前言最近再做个H5移动端社交类型项目的时候,里面有一块类似朋友圈.qq空间展示的模块,开发的时候发现了一个问题,就是展示用户上传的图片,因为用户上传的图片可能是相机拍的,可能是截图.可能是网上找 ...
一个基于Vue的移动端多文件上传插件，支持常见图片的上传。
特性多文件上传上传图片预览上传状态监测删除指定图片清空图片重新上传安装 npm i vue-easy-uploader --save 使用在入口文件main.js中加入以下代码: im ...
vue H5移动端项目真机测试配置
vue cli2 1.配置网段:(手机和电脑在同一局域网内) 2.在项目中重启命令行(或者cmd)运行 ipconfig 获取到项目在本机运行的ip地址 3.关闭防火墙 4.前端:config文件夹下 ...

vue H5(移动端)双指放大图片，单指拖动图片，等图片操作，使用viewerjs

vue H5(移动端)双指放大图片，单指拖动图片，等图片操作，使用viewerjs相关推荐

最新文章

热门文章