微信小程序把缓存的数组动态渲染到页面

微信小程序开发交流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时退出页面后数据状态无效或者重置的情况。