微信小程序开发交流qq群 173683895
承接微信小程序开发。扫码加微信。
正文：
代码实现的目的：当页面销毁的时候，页面的参数状态还是能够保存。
show_img函数实现：
创建一个数组保存到缓存，遍历缓存的list_stutas对象并赋值给data，然后页面根据data的值进行渲染展示。
hb函数实现：
根据图片点击事件携带的id把缓存中list_stutas对象相应下标的值修改为false，达到隐藏该图片的效果，同时跳转到下一个页面。
直接上源码
show_img: function () { var arr = []; if (!wx.getStorageSync('list_stutas')) { for (var i = 0; i < 5; i++) { arr.push(true) } console.log(arr) wx.setStorageSync('list_stutas', arr) } else { for (var i = 0; i < 5; i++) { this.setData({ ['showimage' + i]: wx.getStorageSync('list_stutas')[i] }) } console.log('set') } }, hb(e) { console.log(e.currentTarget.id) var that = this wx.navigateTo({ url: '../hb/hb', }) var list_stutas = wx.getStorageSync('list_stutas') list_stutas[e.currentTarget.id] = false wx.setStorageSync('list_stutas', list_stutas) that.setData({ ['showimage' + e.currentTarget.id]: false }) },wxml
<cover-view wx:if="{{showimage0}}"> <cover-image class='hb' src='../../images/hb.png' id='0' bindtap='hb'></cover-image> </cover-view> <cover-view wx:if="{{showimage1}}"> <cover-image class='hb1' src='../../images/hb.png' id='1' bindtap='hb'></cover-image> </cover-view> <cover-view wx:if="{{showimage2}}"> <cover-image class='hb2' src='../../images/hb.png' id='2' bindtap='hb'></cover-image> </cover-view> <cover-view wx:if="{{showimage3}}"> <cover-image class='hb3' src='../../images/hb.png' id='3' bindtap='hb'></cover-image> </cover-view> <cover-view wx:if="{{showimage4}}"> <cover-image class='hb4' src='../../images/hb.png' id='4' bindtap='hb'></cover-image> </cover-view> <cover-view wx:if="{{showimage5}}"> <cover-image class='hb5' src='../../images/hb.png' id='5' bindtap='hb'></cover-image> </cover-view>本方案在用户清除缓存或者删除小程序时，缓存就无效了。适用于解决没有后端提供API时退出页面后数据状态无效或者重置的情况。
小程序
