uniapp 做一个查看图片的组件,图片可缩放移动

因为是手机端,所以需要触摸可移动,双指放大缩小。

首先在components里建个组件

查看图片使用 uni-popup 弹窗

要注意 transform的translate和scale属性在同一标签上不会一起生效

移动就根据触摸效果进行偏移图片

缩放就根据双指距离的变大变小进行缩放

<template><view><uni-popup style="z-index: 99998;" ref="showImage" type="center"><view :style="{'transform':'translate('+x+'px,'+y+'px)'}"><img:style="{'transform':'scale(' + scale +')','height': height + 'px'}"@touchstart="touchstart"@touchmove="touchmove"@touchend="touchend"@touchcancel="touchcancel"mode="aspectFit":src="src"></img></view><view class="closePopup" @click="close"><uni-icons type="closeempty" size="32" color="#fff"></uni-icons></view></uni-popup></view>
</template><script>export default {name:"selectImage",data() {return {height: 0,src: '',x: 0,y:0,clientX: 0,clientY: 0,moveX: 0,moveY: 0,touchType: 0, // 0为单指触摸  1为双指// 初始双指距离distance: 0,// 初始缩放比例scale: 1};},created() {const me = thisuni.getSystemInfo({success(res) {// 默认图片高度占屏幕一半展示me.height = res.windowHeight / 2}})},methods: {// 获取两点距离getDistance (point1, point2) {const x = point1.clientX - point2.clientXconst y = point1.clientY - point2.clientYreturn Math.sqrt(x*x + y*y)},// 触摸开始touchstart (e) {// 当触摸事件为一个时if (e.touches.length === 1) {// 记录开始触摸位置this.clientX = e.changedTouches[0].clientXthis.clientY = e.changedTouches[0].clientYthis.touchType = 0} else if (e.touches.length === 2) {// 双指进行放大缩小操作this.touchType = 1// 获取双指距离this.distance = this.getDistance(e.touches[0], e.touches[1])}},// 触摸移动中touchmove (e) {// 当触摸事件为一个时if (this.touchType === 0) {// 记录移动的距离 const moveX = e.changedTouches[0].clientX - this.clientXconst moveY = e.changedTouches[0].clientY - this.clientY// 最终偏移距离为初始偏移距离+当前偏移距离this.x = this.moveX + moveXthis.y = this.moveY + moveY} else if (this.touchType === 1) {// 双指进行放大缩小操作if (e.touches.length === 2) {// 获取移动后的双指距离const le = this.getDistance(e.touches[0], e.touches[1])// 最终放大 缩小效果为 初始放大缩小比例 * 当前放大缩小比例const bl = le / this.distanceconst scale = this.scale * blthis.scale = scale > 0.1 ? scale : 0.1// 随着移动将开始的位置重置 不然会一次性放很大 或者缩很小,不好控制this.distance = le}}},// 触摸结束touchend (e) {// 当触摸事件为一个时if (this.touchType === 0) {// 记录最终移动距离const moveX = e.changedTouches[0].clientX - this.clientXconst moveY = e.changedTouches[0].clientY - this.clientY// 最终偏移距离为初始偏移距离+当前偏移距离this.x = this.moveX + moveXthis.y = this.moveY + moveY// 当前偏移距离设置为当前位置this.moveX = this.xthis.moveY = this.y} else if (this.touchType === 1) {// 当双指松开后console.log(e)}},// 因电话等打断时触发touchcancel (e) {if (this.touchType === 0) {this.x = 0this.y = 0} else {this.clientX = 0this.clientY = 0this.moveX = 0this.moveY = 0this.touchType = 0 // 0为单指触摸  1为双指// 初始双指距离this.distance = 0// 初始缩放比例this.scale = 1}},open () {this.$refs.showImage.open()},close () {this.x = 0this.src = ''this.y = 0this.clientX = 0this.clientY = 0this.moveX = 0this.moveY = 0this.touchType = 0 // 0为单指触摸  1为双指// 初始双指距离this.distance = 0// 初始缩放比例this.scale = 1this.$refs.showImage.close()}}}
</script><style>.closePopup {position: fixed;top: 40px;right: 40px;width: 50px;height: 50px;text-align: center;line-height: 50px;z-index: 99999;}
</style>

外面组件调用时引用或者全局注册后使用

外面图片上加个点击事件

 @click="look(url)"

方法直接调用组件open方法就OK了。

look (url) {this.$refs.showImg.src = urlthis.$refs.showImg.open()},

效果图:

---------------查看-------------------------------移动------------------------------缩放

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/53035.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【 html+css 绚丽Loading 】 000052 璇玑转轮

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f…

[网络]http的简单认识

文章目录 一. 什么是http二. http协议工作过程三. http协议格式1. 抓包工具fiddler2. http请求报文3. http响应报文 一. 什么是http HTTP (全称为 “超⽂本传输协议”) 是⼀种应⽤⾮常⼴泛的 应⽤层协议 HTTP 诞⽣与1991年. ⽬前已经发展为最主流使⽤的⼀种应⽤层协议 HTTP 往…

MyBatis中多对一关系的三种处理方法

目录 MyBatis中多对一关系的三种处理方法 1.通过级联属性赋值 1&#xff09;mapper 2&#xff09;mapper.xml 3&#xff09;测试代码 4&#xff09;测试结果 2.通过标签 1&#xff09;mapper 2&#xff09;mapper.xml 3&#xff09;测试代码 4&#xff09;测试结果 3.分步查询 …

【C++二叉树】102.二叉树的层序遍历

107. 二叉树的层序遍历 II - 力扣&#xff08;LeetCode&#xff09; 思路分析&#xff1a; 层序遍历&#xff0c;但是要注意输出的结果是一个二维数组&#xff0c;不是一层一个值一个值的输出&#xff0c;而是要一层一层的输出。可以通过一个循环控制每一层的数据个数&#xff…

PyCharm 安装教程

传送门 PyCharm 是一款由 JetBrains 开发的强大的 Python 集成开发环境&#xff08;IDE&#xff09;。它支持多种功能&#xff0c;包括调试、代码补全、智能代码分析、版本控制集成等&#xff0c;特别适合开发 Python 项目。接下来&#xff0c;我们将详细介绍如何在不同操作系…

【C++高阶】解锁C++的深层魅力——探索特殊类的奥秘

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ ⏩收录专栏⏪&#xff1a;C “ 登神长阶 ” &#x1f921;往期回顾&#x1f921;&#xff1a;C 类型转换 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀C特殊类 &#x1f4d2;1. 不能被拷贝…

文字loading加载

效果 1. 导入库 import sys from PyQt5.QtCore import QTimer, Qt, QThread, pyqtSignal from PyQt5.QtGui import QPainter, QFont, QColor, QBrush from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QPushButton, QProgressBar, QLabel 代码首先导入了P…

C++ | Leetcode C++题解之第409题最长回文串

题目&#xff1a; 题解&#xff1a; class Solution { public:int longestPalindrome(string s) {unordered_map<char, int> count;int ans 0;for (char c : s)count[c];for (auto p : count) {int v p.second;ans v / 2 * 2;if (v % 2 1 and ans % 2 0)ans;}retur…

【设计模式-外观】

这里写自定义目录标题 定义UML图角色作用代码使用场景 定义 为子系统中一组相关接口提供一致界面&#xff0c;定义一个高级接口&#xff0c;使得子系统更加容易使用。 UML图 角色作用 外观&#xff08;Facade&#xff09;角色&#xff1a;这是外观模式的核心&#xff0c;它知…

macOS上谷歌浏览器的十大隐藏功能

谷歌浏览器&#xff08;Google Chrome&#xff09;在macOS上拥有一系列强大而隐蔽的特性&#xff0c;这些功能能显著提高您的浏览体验。从多设备同步到提升安全性和效率&#xff0c;这些被低估的功能等待着被发掘。我们将逐步探索这些功能&#xff0c;帮助您最大化利用谷歌浏览…

力扣题解815

大家好&#xff0c;欢迎来到无限大的频道。祝大家中秋节快乐​。 今日继续给大家带来力扣题解。 题目描述&#xff08;困难&#xff09;​&#xff1a; 公交路线 给你一个数组 routes &#xff0c;表示一系列公交线路&#xff0c;其中每个 routes[i] 表示一条公交线路&…

Python logging库(python日志库)Logger(记录器、收集器、采集器)、Handler(处理器)、Formatter(格式化器)、Log Level(日志级别)

文章目录 Python Logging库详解简介日志记录的基本概念1. Logger&#xff08;记录器&#xff09;&#xff1a;这是日志系统的入口点。每个记录器都有一个名称&#xff0c;并且记录器之间可以存在父子关系。2. Handler&#xff08;处理器&#xff09;&#xff1a;记录器将日志消…

网络安全-intigriti-0422-XSS-Challenge Write-up

目录 一、环境 二、解题 2.1看源码 一、环境 Intigriti April Challenge 二、解题 要求&#xff1a;弹出域名就算成功 2.1看源码 我们看到marge方法&#xff0c;肯定是原型链污染题目 接的是传参&#xff0c;我们可控的点在于qs.config和qs.settings&#xff0c;这两个可…

Java设计模式—面向对象设计原则(四) ----->接口隔离原则(ISP) (完整详解,附有代码+案例)

文章目录 3.4 接口隔离原则(ISP)3.4.1 概述3.4.2 案列 3.4 接口隔离原则(ISP) 接口隔离原则&#xff1a;Interface Segregation Principle&#xff0c;简称ISP 3.4.1 概述 客户端测试类不应该被迫依赖于它不使用的方法&#xff1b;一个类对另一个类的依赖应该建立在最小的接…

Invoke-Maldaptive:一款针对LDAP SearchFilter的安全分析工具

关于Invoke-Maldaptive MaLDAPtive 是一款针对LDAP SearchFilter的安全分析工具&#xff0c;旨在用于对LDAP SearchFilter 执行安全解析、混淆、反混淆和安全检测。 其基础是 100% 定制的 C# LDAP 解析器&#xff0c;该解析器处理标记化和语法树解析以及众多自定义属性&#x…

Excel图片批量插入单元格排版处理插件【图片大师】

为了方便大家在图片的插入排版的重复工作中解放出来&#xff0c;最近发布了一款批量插入图片的插件&#xff0c;欢迎大家下载&#xff0c;免费试用。 这是图片的文件夹&#xff1a; 主要功能如下: 1&#xff0c;匹配单元格名称的多张图批量插入到一个单元格 该功能支持设置图…

腾讯百度阿里华为常见算法面试题TOP100(4):双指针、哈希、滑动窗口

之前总结过字节跳动TOP50算法面试题&#xff1a; 字节跳动常见算法面试题top50整理_沉迷单车的追风少年-CSDN博客_字节算法面试题 目录 双指针 42.接雨水 283.移动零 11.盛最多水的容器 15.三数之和 哈希 1. 两数之和 49.字母异位词分组 128.最长连续序列 滑动窗…

网络协议全景:Linux环境下的TCP/IP、UDP

目录 1.UDP协议解析1.1.定义1.2.UDP报头1.3.特点1.4.缓冲区 2.TCP协议解析2.1.定义2.2.报头解析2.2.1.首部长度&#xff08;4位&#xff09;2.2.2.窗口大小2.2.3.确认应答机制2.2.4.6个标志位 2.3.超时重传机制2.4.三次握手四次挥手2.4.1.全/半连接队列2.4.2.listen2.4.3.TIME_…

SQL进阶的技巧:如何实现某列的累计乘积?

目录 0 场景描述 1 数据准备 2 问题分析 3 完全情况查询 4 小结 0 场景描述 在做数据处理的时候,尤其是复利累积的时候,有时候会有这样一场景,通过某种条件找到一列数据[X1,X2,X3...Xn],然后想要求y=X1X2X3...Xn。下面给出一个具体案例来详细解释这一问题,如下图所示…

学成在线练习(HTML+CSS)

准备工作 项目目录 内部包含当前网站的所有素材&#xff0c;包含 HTML、CSS、图片、JavaScript等等 1.由于元素具有一些默认样式&#xff0c;可能是我们写网页过程中根本不需要的&#xff0c;所有我们可以在写代码之前就将其清除 base.css /* 基础公共样式&#xff1a;清除…