微信小程序自定义图片预览操作按钮(解决api预览时不能删除提交服务器等自定义操作)

devtools/2024/11/27 14:03:24/

概述:

本人在做图片预览的时候,希望能够根据预览的情况,实时删除操作
微信小程序提供的api函数:wx.previewImage,官方说明:https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewImage.html,只有预览多个图片,识别码,供我们操作的地方非常有限。
本文描述的怎么自己实现预览,然后能自定义自己的操作按钮。

原理描述:

需要预览某图片,把这个图片和相应的按钮操作显示填满整个窗口,把窗口的其他元素全部隐藏;
预览完了,点击除按钮其他地方,预览窗口隐藏,窗口的其他元素如之前一样显示。

界面代码:

这是载入图片,预览并能删除功能,为了不引起困惑贴出了所有的代码如下:

<!--pages/metting/mettingaddedit.wxml-->
<view class="cl-item" style="display:{{fullShowIndex>=0 ? 'none' : 'flex'}};"><text class="cl-view">标题:</text><input class="cl-input" bindinput="changeTitle" value="{{inputTitile}}" />
</view>
<view class="cl-item" style="display:{{fullShowIndex>=0 ? 'none' : 'flex'}};"><text class="cl-view">会议室:</text><picker mode="selector" range="{{roomarray}}" range-key="name" value="{{roomarrayindex}}" bindchange="bindPickerRoomChange"><view>{{roomarray[roomarrayindex].name}}</view></picker>
</view>
<view class="cl-item" style="display:{{fullShowIndex>=0 ? 'none' : 'flex'}};"><text class="cl-view">描述:</text><textarea class="cl-input" style="border: 1px solid #c5bbbb;max-height: 160rpx;overflow-y:scroll;" maxlength="-1" bindinput="changeDesc" value="{{inputDesc}}" />
</view>
<view class="cl-item" style="flex-direction: row;display:{{fullShowIndex>=0 ? 'none' : 'flex'}};align-items: center;"><text class="cl-view">时间:</text><picker mode="date" value="{{date}}" start="2010-09-01" end="2030-09-01" bindchange="bindDateChange"><view class="cl-datetime">{{date}}</view></picker><picker mode="time" value="{{time}}" start="08:00" end="23:59" bindchange="bindTimeChange"><view class="cl-datetime">{{time}}</view></picker>
</view>
<view style="padding: 8rpx;flex-direction: row;display:{{fullShowIndex>=0 ? 'none' : 'flex'}};gap: 50rpx;" ><button class="btn-sub" bindtap="onclickSubmit">{{showSubmitBtnStr}}</button><button class="btn-sub" bindtap="onclickReturn">返回</button>  
</view>
<scroll-view scroll-x enable-flex style="padding: 8rpx;flex-direction: row;display: flex;gap: 10rpx;"><view class="image-view" style="display:{{fullShowIndex>=0 ? 'none' : 'flex'}}"><view class="image-item"><image class="image-in" src="{{imageData}}" bindtap="onclickToPreView"></image><text>测试</text></view><view class="image-item"><image class="image-in" src="{{picShowAdd}}" bindtap="onclickUpPic"></image><text style="color: blue;">上传图片</text></view></view>
</scroll-view> 
<view style="display: {{fullShowIndex>=0 ? 'fixed' : 'none'}};width: 100%;height: 100%;flex-direction: column;position:absolute;bottom: 0;top: 0;right: 0;left: 0;" bindtap="onclickPreViewReturn"> <image style="width: 100%;" mode="widthFix" src="{{imageData}}"></image><button style="width: fit-content;height: min-content;border: 1px solid #90e6f5;" catch:tap="onclickDelPic">删除</button>
</view>

注意上面核心部分预览的代码

<view style="display: {{fullShowIndex>=0 ? 'fixed' : 'none'}};width: 100%;height: 100%;flex-direction: column;position:absolute;bottom: 0;top: 0;right: 0;left: 0;" bindtap="onclickPreViewReturn"> <image style="width: 100%;" mode="widthFix" src="{{imageData}}"></image><button style="width: fit-content;height: min-content;border: 1px solid #90e6f5;" catch:tap="onclickDelPic">删除</button>
</view>

js代码:

代码太多,列出相关功能的代码

// pages/metting/mettingaddedit.js
var app = getApp();Page({/*** 页面的初始数据*/data: {picShowAdd:'',imageData:null,fullShowIndex:-1},/*** 生命周期函数--监听页面加载*/onLoad(options) {},onclickUpPic(e) {var that = this;console.log("onclickUpPic");wx.chooseMedia({count: 9,mediaType: ['image','video'],sourceType: ['album', 'camera'],maxDuration: 30,camera: 'back',success(res) {console.log(res.tempFiles[0].tempFilePath);console.log(res.tempFiles[0].size);//that.upPicServer(res.tempFiles[0].tempFilePath);that.setData({imageData:res.tempFiles[0].tempFilePath});}});},  onclickToPreView(e) {this.setData({fullShowIndex:0});},onclickPreViewReturn(e) {this.setData({fullShowIndex:-1});},onclickDelPic(e) {console.log("onclickDelPic");//这里你们实现功能,就不贴代码了},
})

关键点说明:

1、通过变量来控制显示隐藏,预览的时候,预览部分显示其他部分隐藏,反之亦然;
如代码块,关键变量fullShowIndex:
2、核心部分代码,预览的view,要设置成全屏显示,如stype里面:position:absolute;bottom: 0;top: 0;right: 0;left: 0;
3、图片显示,希望尽量显示大又要按照原来比例,< image style=“width: 100%;” mode=“widthFix” src=“{{imageData}}”>,注意width: 100%,mode=“widthFix”。
4、在预览view,加上按钮响应,用来恢复成之前状态,即点击除按钮其他地方,都要退出预览模式, ,中的bindtap="onclickPreViewReturn
5、预览界面删除按钮响应要设置成非冒泡事件,即点了删除不能让父窗口再响应按钮事件,代码:删除中的catch:tap=“onclickDelPic”

预览前效果:

在这里插入图片描述

预览时效果:

在这里插入图片描述

小结:

本代码实现了一张图片预览,带自定义的删除(删除功能代码没提供)操作,一点繁琐但本人觉得效果可以。提供了关键的部分,没有提供完整的,不能完全运行,但是你们可以复制关键点到代码运行。


http://www.ppmy.cn/devtools/137407.html

相关文章

数据结构 【二叉树(上)】

谈到二叉树&#xff0c;先来谈谈树的概念。 1、树的概念及结构 树是一种非线性的数据结构&#xff0c;它的逻辑关系看起来像是一棵倒着的树&#xff0c;也就是说它是根在上&#xff0c;而叶子在下的&#xff0c; 在树这种数据结构中&#xff0c;最顶端的结点称为根结点。在树的…

【Python】九大经典排序算法:从入门到精通的详解(冒泡排序、选择排序、插入排序、归并排序、快速排序、堆排序、计数排序、基数排序、桶排序)

文章目录 1. 冒泡排序&#xff08;Bubble Sort&#xff09;2. 选择排序&#xff08;Selection Sort&#xff09;3. 插入排序&#xff08;Insertion Sort&#xff09;4. 归并排序&#xff08;Merge Sort&#xff09;5. 快速排序&#xff08;Quick Sort&#xff09;6. 堆排序&…

java大视频分片上传

实现原理&#xff0c;前端控制每次上传1mb&#xff0c;后端接受1mb&#xff0c;并记录该分片下标&#xff0c;返回给前端还未上传的下标&#xff0c;直到所有的都上传完成 controller ApiOperation(value "上传视频", notes "上传视频", httpMethod &…

Win7电脑IP地址查看与变换指南

在Windows 7操作系统中&#xff0c;IP地址作为网络通讯的基础信息&#xff0c;对于日常的网络管理和故障排查至关重要。了解如何查看和变换IP地址&#xff0c;可以帮助用户更好地掌握网络状态&#xff0c;优化网络配置。本文将详细介绍在Win7电脑ip地址在哪查看以及Win7电脑ip地…

[含文档+PPT+源码等]精品大数据项目-Django基于大数据实现的游戏用户行为分析与个性化推荐系统

一、项目背景 大数据技术的发展&#xff1a; 随着大数据技术的不断发展和普及&#xff0c;越来越多的行业开始利用大数据进行业务分析和决策。大数据具有数据量大、数据类型多样、处理速度快等特点&#xff0c;为数据分析和个性化推荐提供了强大的技术支持。 游戏产业的繁荣&am…

Windows Pycharm 远程 Spark 开发 PySpark

一、环境版本 环境版本PyCharm2024.1.2 (Professional Edition)Ubuntu Kylin16.04Hadoop3.3.5Hive3.1.3Spark2.4.0 二、Pycharm远程开发 文件-远程-开发 选择 SSH连接&#xff0c;连接虚拟机&#xff0c;选择项目目录即可远程开发

UE5 fieldSystemActor类

在UE5&#xff08;虚幻引擎5&#xff09;中&#xff0c;FieldSystemActor 是用于处理和模拟场景中的物理力场&#xff08;Field Systems&#xff09;的一个重要类。该类提供了一种机制&#xff0c;用于生成和控制力场&#xff0c;进而影响场景中的物理对象。FieldSystemActor 的…

redmi 12c 刷机

刷机历程 一个多月前网购了redmi 12c这款手机, 价格只有550,用来搞机再适合不过了, 拆快递后就开始倒腾,网上有人说需要等7天才能解锁,我绑定了账号过了几天又忍不住倒腾,最后发现这块手机不用等7天解锁成功了,开始我为了获取root权限, 刷入了很火的magisk,但是某一天仍然发现/…