uni-app图片预览组件（简版）

蔚落 2022-10-30 13:22 529阅读 0赞

![在这里插入图片描述][862c8eeb4e78b3f91d8e26db25dc550b.png_pic_center]

需求：uni-app图片预览组件实现图片大图预览双指缩放功能

<template>
    	<view class="preview-pic" @click.stop="close">
    		<movable-area scale-area>
    			<movable-view class="pic" direction="all" @scale="onScale" scale="true" scale-min="1" scale-max="4" :scale-value="scale">
    				<image :src="src" mode="widthFix"></image>
    			</movable-view>
    		</movable-area>
    	</view>
    </template>
    
    <script> export default { name: 'PreviewPic', props: { src: { type: String, required: true } }, data() { return { scale: 1, // 0.5 -10 缩放的倍数 }; }, methods: { close() { this.$emit('close') }, onScale() { console.log('双指缩放') } } } </script>
    
    <style lang="less" scoped> .preview-pic { position: fixed; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2021; background-color: #000000; movable-area { height: 100%; width: 100%; } movable-view image { width: 100%; } .pic { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; display: flex; background-color: #000000; image { width: 100%; } } } </style>

[862c8eeb4e78b3f91d8e26db25dc550b.png_pic_center]: /images/20221024/6936051cafe944709a70d30986300ac3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，529人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni-app图片预览组件（简版）

![在这里插入图片描述][862c8eeb4e78b3f91d8e26db25dc550b.png_pic_center] 需求：uni-app图片预览组件实现图片大图预览双

蔚落/ 2022年10月30日 13:22/ 0 赞/ 530 阅读

相关图片预览

插件：uploadPreview.min.js <tr> <th>商品图片</th>

Love The Way You Lie/ 2022年07月11日 05:40/ 0 赞/ 481 阅读

相关 vue 图片预览组件

vue-photo-preview 转自 https://npm.taobao.org/package/vue-photo-preview 安

阳光穿透心脏的1/2处/ 2022年05月24日 13:45/ 0 赞/ 460 阅读

相关图片预览

定制上传按钮： ![ExpandedBlockStart.gif][] ![复制代码][copycode.gif] <div

「爱情、让人受尽委屈。」/ 2021年12月22日 09:21/ 0 赞/ 693 阅读

相关 uniapp预览图片

一、需求最近有一个留言板需求，留言之后需要展示留言信息，信息里面除了文字还有图片。点击图片，可预览图片。就用到了 uniapp 预览图片的功能：u

以你之姓@/ 2021年09月03日 05:51/ 0 赞/ 1280 阅读

相关 uniapp 实现图片预览单图预览和多图预览

uniapp 实现图片预览单图预览和多图预览关键点就是调用 uni.previewImage({ current: index,

落日映苍穹つ/ 2021年09月02日 03:18/ 0 赞/ 2361 阅读

相关 uniapp——图片的上传和预览

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

待我称王封你为后i/ 2021年07月25日 18:10/ 0 赞/ 892 阅读

相关 uniapp实战——完成图片的预览功能

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

刺骨的言语ヽ痛彻心扉/ 2021年07月25日 17:23/ 0 赞/ 943 阅读

相关 uniapp - 图片的上传和预览

图片的上传和预览 uni.chooseImage(OBJECT) uni.previewImage(OBJECT) 一个图片上传和预览的 demo 实例

红太狼/ 2021年07月25日 14:47/ 0 赞/ 1366 阅读

相关 uniapp 上传图片、点击预览图片

1、在回调中打开本地相册 uni.chooseImage({ count:上传照片数量, //浏览器无法限制,默认上传数量为9

比眉伴天荒/ 2021年07月24日 11:07/ 0 赞/ 1742 阅读