微信小程序图片预览、删除功能

主界面跳转预览页面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

<view class='parentLayout'>

<swiper class="tab-content" current='{{currentTab}}' duration="300" bindchange="switchTab" style="height:{{winHeight}}rpx">

<swiper-item class="tab-item" wx:for="{{pics}}" wx:key="pic" wx:index="index">

<view class='view_flex'>

<image class='image' mode='widthFix' src='{{pics[index]}}' />

</view>

</swiper-item>

</swiper>

<view class='view_bottom'>

<view class='btn_back' bindtap='bindBackTap'>返回</view>

<view class='btn_del' bindtap='bindDelTap'>删除</view>

</view>

</view>

预览页面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,

});

}

})