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

如果对您有帮助,请关注我,欢迎加入微信小程序开发交流QQ群(173683866),有问题可以加群问我或者问群里的大神!!!

微信扫码进入微信群,小程序技术交流答疑群。

微信群介绍:群费 1元/周,群主每周会抽出半小时至一小时集中答疑, 平常有时间也会回复。大家平常也可以相互交流学习。。私聊群主(a_靖)问题 8元/次。

正文:

 

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

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快问
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_35713752/article/details/80317361
个人分类: 微信小程序
所属专栏: 微信小程序
上一篇微信小程序 定时器
下一篇微信小程序去除左上角返回的按钮
想对作者说点什么? 我来说一句

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

关闭
关闭
关闭