uni-app图片设置浏览功能实现双指放大缩小拖动移动

首先，点击触发图片浏览界面

在浏览界面去实现图片移动和放缩

图片设置双指放大缩小这个功能相对来说比较简单的，是用于官方文档的路径(组件->视图容器->movable-area)，movable-area可以做双指放大缩小，并且放大的同时可以左右移动图片(页面)，至于怎么做呢？

用HBuilder X编辑器创建个uni-app项目

html代码

<template><view><view class="uni-padding-wrap uni-common-mt"><movable-area scale-area><movable-view direction="all" @scale="onScale" scale="true" scale-min="1" scale-max="4" :scale-value="scale"><image src="图片路径" mode="widthFix"></image></movable-view></movable-area></view>
</view>
</template>

需要说一下movable-view标签里的 scale-min=“1” scale-max="4"是干嘛用的，这两个设置相对来说也比较重要
scale-min 拿图片来说，如果 scale-min=“0.5” 的话那图片就会显示50%，不会完全100%显示，所以就让他初始化等于 1
scale-max 他的意思是双指放大可以放大几倍，比如 scale-max=“4” 那么双指放大4倍
movable-area是不需要写任何js代码的

onScale是空函数

css代码

movable-view {display: flex;align-items: center;justify-content: center;width: 100%;height:100%;
}movable-area {height: 100%;width: 100%;position:fixed;overflow: hidden;
}movable-view image{width:100%;
}

uni-app图片设置浏览功能实现双指放大缩小拖动移动相关推荐

uni-app图片如何设置双指放大缩小
图片设置双指放大缩小这个功能相对来说比较简单的,是用于官方文档的路径(组件->视图容器->movable-area),movable-area可以做双指放大缩小,并且放大的同时可以左右移动 ...
移动端图片单指移动,双指放大缩小实现//touchmove的时候不让body滚动
移动端图片单指移动,双指放大缩小实现//touchmove的时候不让body滚动思路1:移动放大缩小操作都直接放到图片上面图片的放大缩小使用transform的scale属性操作,移动使用tran ...
C#制作一个图片查看器，具有滚轮放大缩小，鼠标拖动，图像像素化，显示颜色RGB信息功能
目录前言一.界面设计二.关键技术 1.把图片拖入到窗体并显示 2.实现图像缩放的功能 3.实现图像的移动效果 4.实时显示当前鼠标处的RGB值 5. 右击功能的实现 6.效果展示总结前言使 ...
element-ui+js+vue——实现图片的放大缩小拖动等功能——技能提升
elementui+js+vue--实现图片组件的封装 1. 实现图片的放大缩小 2. 实现图片的拖动功能 3. 实现图片的预览最近同事在写一个关于图片放大缩小拖动的功能,其实不止是图片,只要是在 ...
百度地图api不支持windows平板双指放大缩小解决方案
百度地图api不支持windows平板双指放大缩小解决方案 (1)保存百度使用API返回的脚本,这个接口 http://api.map.baidu.com/getscript?v=2.0, 命名为 ...
我的Android进阶之旅------android Matrix图片随意的放大缩小,拖动（转）
step1:新建一个项目DragAndZoom,并准备一张照片放在res/drawable-hdpi目录下,如下图所示: step2: 设置应用的UI界面,在main.xml中设置: [html] v ...
android 自定义ImageView实现图片手势滑动，多点触摸放大缩小效果
首先呢,还是一贯作风,我们先来看看众多应用中的示例:(这种效果是很常见的,可以说应用的必须品.) 搜狐客户端 ...
AfterEffect插件--常规功能开发--合成放大缩小--js脚本开发--AE插件
文章目录 1.算法程序 2.作者答疑 1.算法程序 AfterEffect(AE)插件是Adobe公司开发的特效制作软件,稳定快速的功能和特效,在视频制作领域使用非常广泛,本文向大家介绍如何在项目 ...
C#图片放大缩小拖动
1.Panel里放picturebox,picturebox大小与panel相同. 放大缩小: 在窗体load事件中加入 this.MouseWheel += splitContainer1_Pane ...

uni-app图片设置浏览功能实现双指放大缩小拖动移动

uni-app图片设置浏览功能实现双指放大缩小拖动移动相关推荐

最新文章

热门文章

uni-app图片 设置浏览功能 实现双指放大缩小 拖动移动

uni-app图片 设置浏览功能 实现双指放大缩小 拖动移动相关推荐

最新文章

热门文章

uni-app图片设置浏览功能实现双指放大缩小拖动移动

uni-app图片设置浏览功能实现双指放大缩小拖动移动相关推荐