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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_35713752/article/details/80317361

 有问题可以扫码加我微信,有偿解决问题。承接小程序开发。

微信小程序开发交流qq群   173683895  、 526474645 ;

正文:

 

代码实现的目的:当页面销毁的时候,页面的参数状态还是能够保存。

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时退出页面后数据状态无效或者重置的情况。

阅读更多

扫码向博主提问

a_靖

博客专家

非学,无以致疑;非问,无以广识
  • 擅长领域:
  • 微信小程序前端开发
  • js
  • 画布
  • 动画
去开通我的Chat快问
想对作者说点什么?

博主推荐

换一批

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