微信小程序图片预览、删除功能
主界面跳转预览页面js
var index = e.currentTarget.dataset.index;
var pic = JSON.stringify(this.data.pic);
wx.navigateTo({
url: '/pages/******/picture/picture?pics=' + pic + '&index=' + index,
});
预览页面wxml
预览页面wxss
.content {
background: #fff;
}
.section {
border-bottom: 1px solid #eee;
margin: 0 8px 0 8px;
}
.inputLabel {
display: flex;
color: #444;
position: inherit;
margin-bottom: -8%;
padding-bottom: 5%;
padding-top: 2%;
}
.inputicon {
font-size: 15px;
color: #999;
float: right;
position: initial;
margin-top: -12%;
}
.contentinput {
height: 100rpx;
width: 80%;
font-size: 16px;
line-height: 100rpx;
color: #999;
}
.contenttextarea {
margin-top: 20rpx;
min-height: 100rpx;
width: 98%;
font-size: 16px;
color: #999;
}
.placeholderStyle {
color: #999;
font-size: 16px;
}
.picker{
color: #999;
font-size: 16px;
}
/* 一行多列样式 */
.zuhe .section {
margin: 0;
width: 31%;
padding-left: 8px;
float: left;
}
.zuhe .inputicon{
margin-top:-40%;
padding-right:5%;
}
/* end */
.xqpage{
position: absolute;z-index: 1;background: #fff
}
.xqtext{
color: #999;
padding: 2px;
font-size:16px
}
.contenttextarea image{
display: block;
float:left;
width:130rpx;
height:130rpx;
margin: 0 5rpx 0 0;
padding-top:8%;
}
预览页面js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
wx.setNavigationBarTitle({
title: '图片预览',
});
// 高度自适应
var calc = 0;
wx.getSystemInfo({
success: function (res) {
var clientHeight = res.windowHeight,
clientWidth = res.windowWidth,
rpxR = 750 / clientWidth;
calc = clientHeight * rpxR - 90;
that.setData({
winHeight: calc,
});
}
});
//将传过来的数组显示出来
var pics = [];
pics = JSON.parse(options.pics);
console.log(pics);
var index = options.index;
this.setData({
pics: pics,
currentTab: index,
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
bindBackTap: function (e) {
wx.navigateBack({
delta: 1,
});
},
bindDelTap: function (e) {
console.log(this.data);
var index = e.currentTarget.dataset.index;
var pics = this.data.pics;
var currentTab = this.data.currentTab;
//如果当前位置为最后一个，位置变成上一个 不然当前位置图片显示为空
if (this.data.currentTab == pics.length - 1) {
currentTab = pics.length - 2;
}
//删除所选图片的数组所在位置
pics.splice(this.data.currentTab, 1);
var pages = getCurrentPages();
var prePage = pages[pages.length - 2];
//获取上个界面base64数组并删除当前位置
var base64Pic = [];
base64Pic = prePage.data.pic;
base64Pic.splice(this.data.currentTab, 1);
//更新上一页图片数组
prePage.setData({
pic: pics
});
//更新本页面图片数组
this.setData({
currentTab: currentTab,
pics: pics,
});
//如果最后一张被删除直接返回
if (pics.length == 0) {
wx.navigateBack({
delta: 1
});
}
}, switchTab: function (e) {
var that = this;
this.setData({
currentTab: e.detail.current,
});
}
})