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

概述：

本人在做图片预览的时候，盼望能够根据预览的情况，及时删除利用。
微信小程序提供的api函数：wx.previewImage，官方说明：https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewImage.html，只有预览多个图片，辨认码，供我们利用的地方非常有限。
本文形貌的怎么本身实现预览，然后能自定义本身的利用按钮。
原理形貌：

需要预览某图片，把这个图片和相应的按钮利用表现填满整个窗口，把窗口的其他元素全部隐藏；
预览完了，点击除按钮其他地方，预览窗口隐藏，窗口的其他元素如之前一样表现。
界面代码：

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

1. <!--pages/metting/mettingaddedit.wxml-->
2. <view class="cl-item" style="display:{{fullShowIndex>=0 ? 'none' : 'flex'}};">
3.   <text class="cl-view">标题:</text>
4.   <input class="cl-input" bindinput="changeTitle" value="{{inputTitile}}" />
5. </view>
6. <view class="cl-item" style="display:{{fullShowIndex>=0 ? 'none' : 'flex'}};">
7.   <text class="cl-view">会议室:</text>
8.   <picker mode="selector" range="{{roomarray}}" range-key="name" value="{{roomarrayindex}}" bindchange="bindPickerRoomChange">
9.     <view>{{roomarray[roomarrayindex].name}}</view>
10.   </picker>
11. </view>
12. <view class="cl-item" style="display:{{fullShowIndex>=0 ? 'none' : 'flex'}};">
13.   <text class="cl-view">描述:</text>
14.   <textarea class="cl-input" style="border: 1px solid #c5bbbb;max-height: 160rpx;overflow-y:scroll;" maxlength="-1" bindinput="changeDesc" value="{{inputDesc}}" />
15. </view>
16. <view class="cl-item" style="flex-direction: row;display:{{fullShowIndex>=0 ? 'none' : 'flex'}};align-items: center;">
17.   <text class="cl-view">时间:</text>
18.   <picker mode="date" value="{{date}}" start="2010-09-01" end="2030-09-01" bindchange="bindDateChange">
19.     <view class="cl-datetime">
20.       {{date}}
21.     </view>
22.   </picker>
23.   <picker mode="time" value="{{time}}" start="08:00" end="23:59" bindchange="bindTimeChange">
24.     <view class="cl-datetime">
25.       {{time}}
26.     </view>
27.   </picker>
28. </view>
29. <view style="padding: 8rpx;flex-direction: row;display:{{fullShowIndex>=0 ? 'none' : 'flex'}};gap: 50rpx;" >
30.   <button class="btn-sub" bindtap="onclickSubmit">{{showSubmitBtnStr}}</button>
31.   <button class="btn-sub" bindtap="onclickReturn">返回</button>  
32. </view>
33. <scroll-view scroll-x enable-flex style="padding: 8rpx;flex-direction: row;display: flex;gap: 10rpx;">
34.   <view class="image-view" style="display:{{fullShowIndex>=0 ? 'none' : 'flex'}}">
35.     <view class="image-item">
36.       <image class="image-in" src="{{imageData}}" bindtap="onclickToPreView"></image>
37.       <text>测试</text>
38.     </view>
39.     <view class="image-item">
40.       <image class="image-in" src="{{picShowAdd}}" bindtap="onclickUpPic"></image>
41.       <text style="color: blue;">上传图片</text>
42.     </view>
43.   </view>
44. </scroll-view>
45. <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">
46.   <image style="width: 100%;" mode="widthFix" src="{{imageData}}"></image>
47.   <button style="width: fit-content;height: min-content;border: 1px solid #90e6f5;" catch:tap="onclickDelPic">删除</button>
48. </view>

复制代码

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

1. <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">
2.   <image style="width: 100%;" mode="widthFix" src="{{imageData}}"></image>
3.   <button style="width: fit-content;height: min-content;border: 1px solid #90e6f5;" catch:tap="onclickDelPic">删除</button>
4. </view>

复制代码

js代码：

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

1. // pages/metting/mettingaddedit.js
2. var app = getApp();
4. Page({
6.   /**
7.    * 页面的初始数据
8.    */
9.   data: {
10.     picShowAdd:'',
11.     imageData:null,
12.     fullShowIndex:-1
13.   },
15.   /**
16.    * 生命周期函数--监听页面加载
17.    */
18.   onLoad(options) {
19.   },
21.   onclickUpPic(e) {
22.     var that = this;
23.     console.log("onclickUpPic");
24.     wx.chooseMedia({
25.       count: 9,
26.       mediaType: ['image','video'],
27.       sourceType: ['album', 'camera'],
28.       maxDuration: 30,
29.       camera: 'back',
30.       success(res) {
31.         console.log(res.tempFiles[0].tempFilePath);
32.         console.log(res.tempFiles[0].size);
33.         //that.upPicServer(res.tempFiles[0].tempFilePath);
34.         that.setData({
35.           imageData:res.tempFiles[0].tempFilePath
36.         });
37.       }
38.     });
39.   },  
41.   onclickToPreView(e) {
42.     this.setData({
43.       fullShowIndex:0
44.     });
45.   },
46.   onclickPreViewReturn(e) {
47.     this.setData({
48.       fullShowIndex:-1
49.     });
50.   },
51.   onclickDelPic(e) {
52.     console.log("onclickDelPic");
53.     //这里你们实现功能，就不贴代码了
54.   },
55. })

复制代码

关键点说明：

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”
预览前效果：

预览时效果：

小结：

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。