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

embedded/2024/11/27 14:13:08/

概述:

本人在做图片预览的时候,希望能够根据预览的情况,实时删除操作
微信小程序提供的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/embedded/140915.html

相关文章

初阶数据结构之队列的实现

1 队列的定义 什么是队列呢&#xff1f;队列只允许在一端进行插入数据操作&#xff0c;在另一端进行删除数据操作。队列具有先进先出FIFO(First In First Out)的特性。 队头&#xff1a;删除数据的一端称为队头。 队尾&#xff1a;插入数据的一端称为队尾。 2 队列底层结构…

【Linux系统编程】第五十弹---构建高效单例模式线程池、详解线程安全与可重入性、解析死锁与避免策略,以及STL与智能指针的线程安全性探究

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】 目录 1、将日志加到线程池 1.1、Thread类 1.2、ThreadPool类 1.2.1、HandlerTask() 1.2.2、其他公有成员函数 1.3、主函数 2、…

Android BottomNavigationView 底部导航栏使用详解

一、BottomNavigationView简介 BottomNavigationView是官方提供可以实现底部导航的组件&#xff0c;最多支持5个item&#xff0c;主要用于功能模块间的切换&#xff0c;默认会包含动画效果。 官方介绍地址&#xff1a;BottomNavigationView 二、使用BottomNavigationView a…

SpringBoot(四十)SpringBoot集成RabbitMQ使用过期时间+死信队列实现延迟队列

前边我们使用RabbitMQ实现了高并发下对流量的削峰填谷。正常在实际应用中大概也就够用了。 有的时候呢&#xff0c;我们需要使用到延迟队列&#xff0c;RabbitMQ不像RocketMQ一样默认就支持延迟队列&#xff0c;RabbitMQ是不支持延迟队列的&#xff0c;但是呢&#xff1f;我们可…

OCR-free Document Understanding Transformer

摘要:理解文档图像(如发票)是一个核心且具有挑战性的任务,因为它需要执行复杂的功能,如读取文本和对文档的整体理解。目前的视觉文档理解(VDU)方法将读取文本的任务外包给现成的光学字符识别(OCR)引擎,并专注于使用OCR输出进行理解任务。尽管基于OCR的方法显示出令人…

c++编程玩转物联网:使用芯片控制8个LED实现流水灯技术分享

在嵌入式系统中&#xff0c;有限的GPIO引脚往往限制了硬件扩展能力。74HC595N芯片是一种常用的移位寄存器&#xff0c;通过串行输入和并行输出扩展GPIO数量。本项目利用树莓派Pico开发板与74HC595N芯片&#xff0c;驱动8个LED实现流水灯效果。本文详细解析项目硬件连接、代码实…

极狐GitLab 17.6 正式发布几十项与 DevSecOps 相关的功能【二】

GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署极狐GitLab。 学习极狐GitLab 的相关资料&#xff1a; 极狐GitLab 官网极狐…

零基础3分钟快速掌握 ——Linux【终端操作】及【常用指令】Ubuntu

1.为啥使用Linux做嵌入式开发 能广泛支持硬件 内核比较高效稳定 原码开放、软件丰富 能够完善网络通信与文件管理机制 优秀的开发工具 2.什么是Ubuntu 是一个以桌面应用为主的Linux的操作系统&#xff0c; 内核是Linux操作系统&#xff0c; 具有Ubuntu特色的可视…