a_靖的博客

欢迎加入微信小程序开发交流qq群(173683895),里面有很多热心的大神会和你一起学习探讨开发中遇到的问题哦。...

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

欢迎加入我的微信小程序开发交流群(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时退出页面后数据状态无效或者重置的情况。
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_35713752/article/details/80317361
个人分类: 微信小程序
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭