微信小程序——修改缓存数据，更新页面展示_微信小程序更新用户缓存数据-优快云博客

本文链接：https://blog.youkuaiyun.com/Kiruthika/article/details/118755830

这篇博客介绍了一个用户界面的实现过程，当用户点击‘选为当前设备’按钮，该按钮会变成灰色并显示‘当前设备’，其他设备按钮变为绿色并显示‘选为当前设备’。代码示例使用了微信小程序（wx）的WXML和JS，通过更新本地缓存数据来改变按钮的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目需求大概是这样的一个流程，当用户点击“选为当前设备”，点击的那个按钮变为灰色按钮且展示的文字是“当前设备”，其他的按钮展示成“选为当前设备”，且按钮成绿色状态
在这里插入图片描述
本地缓存数据如下:

 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)
	}
})