微信小程序——修改缓存数据，更新页面展示

项目需求大概是这样的一个流程，当用户点击“选为当前设备”，点击的那个按钮变为灰色按钮且展示的文字是“当前设备”，其他的按钮展示成“选为当前设备”，且按钮成绿色状态

本地缓存数据如下:

 deviceList:[{deviceName:'设备A',deviceId:'a',selStatus:false},{deviceName:'设备B',deviceId:'b',selStatus:false},{deviceName:'设备C',deviceId:'c',selStatus:true}]

现在将设备A项选为当前设备：

index.wxml:

<view class="device-list" wx:for="{{deviceList}}" wx:for-item="item" wx:key="item"><view class="device_name">{{item.deviceName}}</view><button bindtap="setCurDevice" data-id="{{item.deviceId}}" disabled="{{item.selStatus ? true : false}}"class="selectCur" type="{{item.selStatus ? 'default' : 'primary'}}">{{item.selStatus ?'当前设备':'选为当前设备'}}</button>
</view>

index.js:

Page({data:{deviceList:[]},onShow(){let deviceList = wx.getStorageSync('deviceList');this.setData({deviceList})},//点击选为当前设备setCurDevice(e){let deviceList = wx.getStorageSync('deviceList');let setAfterDeviceList = deviceList.map(item => {item.deviceId == e.currentTarget.dataset.id?item.selStatus = true:item.selStatus = false;return item})this.setData({deviceList:setAfterDeviceList})wx.setStorageSync('deviceList', setAfterDeviceList)}
})

微信小程序——修改缓存数据，更新页面展示相关推荐

微信小程序 - 自定义组件中类似页面 onShow 的页面显示就触发的生命周期钩子函数（页面回退时更新数据常用, 例如回退页面更新子组件数据, 回退更新子组件中 data 内容）
前言在微信小程序中,用户回退页面触发更新数据的操作,一般都是在页面 onShow() 中写上执行更新的函数即可. 但如果咱们把数据和方法都写在了自定义子组件中,那么用户回退页面时, 更新数据就成了 ...
PHP更新小程序,微信小程序Tab页切换更新数据详细介绍
这篇文章主要介绍了微信小程序 Tab页切换更新数据的相关资料,需要的朋友可以参考下微信小程序 Tab页切换更新数据微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天 ...
微信小程序webview内嵌H5页面缓存
微信小程序webview内嵌H5页面缓存参考链接: link. 问题描述: 公司项目已经开发了一个移动端的vue项目,以微信小程序作为一个入口,节省资源去原生开发,webview成了最好的选择.vu ...
微信小程序使用echarts实时更新数据以及常见bug
** 微信小程序使用echarts实时更新数据以及常见bug ** 参考echarts官方文档:https://echarts.apache.org/zh/tutorial.html 下载小程序ech ...
分享下自己写的一个微信小程序请求远程数据加载到页面的代码
分享下自己写的一个微信小程序请求远程数据加载到页面的代码 1 思路整理就是页面加载完毕的时候请求远程接口,然后把数据赋值给页面的变量 ,然后列表循环 2 js相关代码我是改的 onload ...
微信小程序 api 缓存方案
微信小程序 api 缓存方案背景前言缓存方案(更新策略) 缓存那些接口 Storage 缓存工具类 ApiCache 类实现配置封装 request 请求总结背景为了应对用户流量大,减 ...
小程序 php转excel,做微信小程序上传数据数据格式？-微信上传数据生成excle
做微信小程序上传数据数据格式? 建议找人专门制作设计好,专业的事情交给专业的人做,自己浪费时间还不一定能搞好如何把微信里的excel传到qq上 1.在手机中先箭头所示的"微信" ...
微信小程序实现缓存过期时间
微信小程序实现缓存过期时间前言一.设置缓存二.得到缓存总结前言先来看看官方文档 wx.setStorageSync(string key, any data) 将数据存储在本地缓存中指定的 ...
网易云易盾推出面向微信小程序的大数据反作弊产品
近日,国内领先的业务风控服务网易云易盾对外推出面向微信小程序的大数据反作弊产品,源于网易20年的核心业务风控技术与全面稳健的策略模型,有机整合了设备指纹.IP画像.规则引擎等八大能力,可广泛应用电商营 ...

微信小程序——修改缓存数据，更新页面展示

微信小程序——修改缓存数据，更新页面展示相关推荐

最新文章

热门文章