mpvue实现微信小程序样式切换以及本地缓存

news/2025/3/15 20:05:02/

功能描述:

在页面A的添加应用中点击”添加“,跳转到展示所有应用的页面B,通过点击开关,在页面A中展示所开启的应用

效果展示:

代码:

页面B代码:

 <div class="itembox" v-for="(item,index) in appinfo" :key="index"><div class="boxhead"><img :src="item.imgsrc"><div class="time"><h3>{{item.appname}}</h3><span>{{item.appintro}}</span></div><span class="stutas" :class="{'offbtn':item.btnlock}" @click="toBs(index)">{{item.btntxt}}</span></div></div>

页面Bjs代码: 

 toBs(index){//切换开发样式this.appinfo[index].btnlock=!this.appinfo[index].btnlockif(this.appinfo[index].btnlock == true){this.appinfo[index].btntxt = "未启用"//setappArr.splice(this.appinfo[index],1);for (var i = 0; i < setappArr.length; i++) {if (setappArr[i] == this.appinfo[index]) {setappArr.splice(i, 1);break;}}wx.setStorage({key: 'apply',  //key为存储的名字  可自行定义  但是注意获取时也要用这个名字data: setappArr  //要存储的数据})}else{this.appinfo[index].btntxt = "已启用"setappArr.push(this.appinfo[index])wx.setStorage({key: 'apply',  //key为存储的名字  可自行定义  但是注意获取时也要用这个名字data: setappArr  //要存储的数据})}}

页面A中

onShow(){var _this = thiswx.getStorage({key: 'apply',success (res) {_this.appinfo = res.dataconsole.log(res.data)}})}

代码


http://www.ppmy.cn/news/813728.html

相关文章

联想主板9针开关接线图_Arduino小白的学习记录:振动开关实验

一、介绍 上一个实验我们知道了倾斜开关的原理和使用方法,接下来我们一起来看看振动开关的实验吧。振动开关也称为弹簧开关或者震动传感器,是一种电子开关,它会产生震动并将结果传输给电路装置,从而触发其工作。它包含以下部分:导电振动弹簧、开关主体、触发销和包装壳。 …

计算机232接口接线图,串口线(232接口详细接线图)

你说的 串口 是 指 外设 接口 还是 硬盘 接口?连接外部设备的串口 即 COM端口标准的是 9根信号,可以用来 连接 modem,拨打电话 等等简单的 3 线 信号 就 可以 全双工 . 越详细越好!谢谢希望是无偿的 所以我就不给F啦 所谓的串口,并口是硬盘连接电脑主板的接口,848以上的芯…

联想主板9针开关接线图_空气开关、断路器、漏电保护,汇总学习一下

一、空气开关 空气开关,又名空气断路器,是断路器的一种。是一种只要电路中电流超过额定电流就会自动断开的开关。空气开关是低压配电网络和电力拖动系统中非常重要的一种电器,它集控制和多种保护功能于一身。除能完成接触和分断电路外,尚能对电路或电气设备发生的短路、严重…

在macOS 上使用 esptool 烧录合宙ESP32C3 开发板 micropython 固件遇到的问题与解决办法

在macOS 上使用 esptool 烧录合宙ESP32C3 开发板 micropython 固件遇到的问题与解决办法 问题原因解决办法全部操作步骤1. 安装esptool2. 安装CH340 驱动程序3. 烧录固件 问题 使用 esptool 烧录遇到报错 A fatal error occurred: Failed to write to target RAM (result was …

联想主板9针开关接线图_收藏丨34个电气控制接线图、电子元件工作原理图

1、可控硅调速电路 2、电磁调速电机控制图 3、三相四线电度表互感器接线 4、能耗制动 5、顺序起动,逆序停止

创想Ender3主板接线图,自动调平BL 3d touch如何连接

绿色v1.1.2 / v1.1.4&#xff08;非静音主板&#xff09; 、 黑色v1.1.5&#xff08;2208驱动的静音主板&#xff09; Ender-3/CR-10 3D touch 自动调平传感器接线方式与说明。 Pin 27 Board 下图可以自己diy这个转接板。如果不想折腾&#xff0c;就搜关键词Pin 27 Board&…

C语言指针进阶

目录 0.指针初阶回顾&#xff1a; 1.字符指针 2.指针数组 3.数组指针 &#xff08;1&#xff09;数组指针的定义&#xff1a; &#xff08;2&#xff09;数组名和&数组名 &#xff08;3&#xff09;数组指针的使用 &#xff08;4&#xff09;数组指针的数组&#x…

单调栈part3 | 84.柱状图中最大的矩形

文章目录 84.柱状图中最大的矩形思路思路代码困难 今日收获总结 84.柱状图中最大的矩形 思路 只有栈里从大到小的顺序&#xff0c;才能保证栈顶元素找到左右两边第一个小于栈顶元素的柱子。 所以本题单调栈的顺序正好与接雨水反过来。 此时大家应该可以发现其实就是栈顶和栈…