微信小程序自定义图片预览利用按钮(解决api预览时不能删除提交服务器等自定
概述：本人在做图片预览的时候，盼望能够根据预览的情况，及时删除利用。
微信小程序提供的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.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.tempFilePath);
console.log(res.tempFiles.size);
//that.upPicServer(res.tempFiles.tempFilePath);
that.setData({
imageData:res.tempFiles.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”
预览前效果：
https://i-blog.csdnimg.cn/direct/1289fe2600bc41568cfbb942620fcdf3.png
预览时效果：
https://i-blog.csdnimg.cn/direct/e6c80c3fd4de4b86ac5a83244802b6e4.png
小结：
本代码实现了一张图片预览，带自定义的删除(删除功能代码没提供)利用，一点繁琐但本人觉得效果可以。提供了关键的部分，没有提供完整的，不能完全运行，但是你们可以复制关键点到代码运行。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]