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

微信小程序开发交流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 = thiswx.navigateTo({url: '../hb/hb',})var list_stutas = wx.getStorageSync('list_stutas')list_stutas[e.currentTarget.id] = falsewx.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时退出页面后数据状态无效或者重置的情况。

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

【微信小程序】二维数组列表渲染
微信小程序官方文档主要是一维数组列表渲染的案例: Page({items: [{message: 'foo',},{message: 'bar'}] }) <view wx:for=" ...
微信小程序实现缓存过期时间
微信小程序实现缓存过期时间前言一.设置缓存二.得到缓存总结前言先来看看官方文档 wx.setStorageSync(string key, any data) 将数据存储在本地缓存中指定的 ...
微信小程序 api 缓存方案
微信小程序 api 缓存方案背景前言缓存方案(更新策略) 缓存那些接口 Storage 缓存工具类 ApiCache 类实现配置封装 request 请求总结背景为了应对用户流量大,减 ...
微信小程序56个民族数组选择器
微信小程序56个民族数组选择器 wxml部份: <view class="section"><picker bindchange="bindPicker ...
微信小程序更新二维数组中的对象或数组的属性值
微信小程序更新二维数组中的对象或数组的属性值,这里可能有两种情况 1.微信小程序更新二维数组中的对象的属性值更新二维数组中的某个对象的属性值,代码如下 js 代码 data: {familys:[{ ...
微信小程序动画渐入以及动态存值setdata问题
微信小程序动画渐入以及动态存值setdata问题想要在微信小程序中制作多个元素逐一渐入的效果,效果类似下图: 首先参考微信开发文档API动画部分的内容开发文档API–动画Animation 创建动 ...
微信小程序开发（一）动态修改页面标题
为提高微信小程序的用户体验,原则上设计页面时,页面顶部标题应随内容不同进行修改. 微信小程序固定架构 pages example example.js example.json example.wxm ...
微信小程序（第十九章）- 用户评价页面实现
微信小程序(第十九章)- 用户评价页面实现页面结构的实现页面样式实现五角星实现页面结构的实现代码如下:  <view id="reviewV ...
微信小程序学习2：开发工具快速创建页面（pages）的四个文件(.js，.json，.wxml， .wxss)
微信小程序学习2:开发工具快速创建页面(pages)的四个文件(.js,.json,.wxml, .wxss) [1]首先在pages文件夹下创建一个页面文件夹,比如我打算创建个人中心,我创建一个ho ...

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

承接微信小程序开发。扫码加微信。

正文：

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

最新文章

热门文章