微信小程序使用 Vant Weapp 中 Collapse 折叠面板 的问题!
需求:结合Tab 标签页 和 Collapse 折叠面板 组合成显示课本和章节内容,并且用户体验要好点!
如下图展示:
问题:如何使用Collapse 折叠面板 将内容循环展示出来?
js中的数据是这样的
代码实现:
<van-tabs animated sticky active="{{ active }}" title-active-color="#e54d42" line-height="10rpx" tab-active-class="tab-item" ellipsis="{{false}}" bind:click="toBook"><van-tab wx:for="{{navLists}}" wx:key="nav" title="{{item.kb}} {{item.title}}"><!-- --><van-collapse value="{{ activeNames }}" bind:change="onChange" wx:for="{{ book }}" wx:key="b" wx:for-item='books' wx:for-index="bookindex"><!-- --><van-collapse-item title="{{ books.name }}" name="{{ bookindex }}"><view wx:for="{{books.content}}" wx:key="c" wx:for-item="jie" wx:for-index="jieindex"><navigator url="" style="padding: 20rpx 0 20rpx 10rpx;"><view style="display: flex;align-items: center;justify-content: space-between;padding-bottom: 10rpx;"><view>{{jie.title}} <text> [ {{jie.complete}} / {{jie.num}} ] </text></view><van-icon name="arrow" /></view><van-progresspercentage="{{jie.percent || 0}}"pivot-text="{{jie.percent || 0}}%"pivot-color="#0081ff"stroke-width="12"color="linear-gradient(to right, #be99ff, #0081ff)"/></navigator></view></van-collapse-item></van-collapse></van-tab>
</van-tabs>
这里要注意的有:
1、value=“{{ activeNames }}” 这里的activeNames仅仅表示点击那章的标号;
在js中,activeNames:[‘’];必修是数组形式!空表示都不展开。
2、循环的数据改变!也就是book数组重新赋值!
这里面还有一个问题如下:
onChange(e) {//这里有一个很奇怪的问题,就是每次点击章的时候,会自动添加一项,这一项居然的index,但不知道为什么?this.setData({book:this.data.book, //这里是选择哪本书之后,要赋予的该书的章节内容!activeNames:e.detail //这里表示的是显示的哪一项})},
算了,解决就好!2024.04.19
相关文章:
微信小程序使用 Vant Weapp 中 Collapse 折叠面板 的问题!
需求:结合Tab 标签页 和 Collapse 折叠面板 组合成显示课本和章节内容,并且用户体验要好点! 如下图展示: 问题:如何使用Collapse 折叠面板 将内容循环展示出来? js中的数据是这样的 代码实现࿱…...
论文写作神器:用ChatGPT写论文的5大高效技巧
在人工智能日渐成熟的今天,ChatGPT已经成为学术界、业界乃至日常生活中不可或缺的工具之一。尤其是对于学生和研究人员而言,ChatGPT能大幅度提高论文写作的效率和质量。然而,许多人尚未掌握如何高效利用这一工具,很多人用chatgpt写…...
微信小程序展示倒计时
html <view class"countdown"> <text>倒计时:</text> <text wx:for"{{countdown}}" wx:key"index">{{item}}</text> </view> ts data: {countdown: [], // 存放倒计时数组 targetTime:…...
什么是用户体验(UX)文案,为什么它很重要?
网上购物如今比以往任何时候都更加相关。所以我们将以此为例说明什么是用户体验(UX)文案,以及为什么它很重要。 假设你去了一个在线商店。你需要执行一系列操作: 找到合适的部分选择你感兴趣的产品弄清楚它们是什么,…...
算法06链表
算法06链表 一、链表概述1.1概述1.2链表的组成部分:1.3链表的优缺点: 二、链表典例力扣707.设计链表难点分析:(1)MyLinkedList成员变量的确定:(2)初始化自定义链表:&…...
第十七章 数据管理和组织变革管理
17.2 变革法则 1)组织不变革,人就变。 2)人们不会抗拒变革,但抵制被改变。 3)事情之所以存在是惯性所致。 4)除非有人推动变革,否则很可能止步不前。 5)如果不考虑人的因素…...
基于harris角点和RANSAC算法的图像拼接matlab仿真
目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 MATLAB2022a 3.部分核心程序 ....................................................................... I1_harris fu…...
C++感受6-Hello World 交互版
变量、常量输入、输出、流getline() 函数读入整行输入Hello() 函数复习新定义函数 Input() 实现友好的人机交互还有 “痘痘” 为什么挤不到的分析…… 1. DRY 原则简介 上一节课,我们写了两版“问候”程序。第一版的最大问题是重复的内容比较多,每一次问…...
02_c/c++开源库ZeroMQ
1.安装 C库 libzmq sudo apt install libzmq3-dev 实例: https://zeromq.org/get-started/?languagec&librarylibzmq# 编译依赖: pkg-config --cflags --libs libzmq or cat /usr/lib/x86_64-linux-gnu/pkgconfig/libzmq.pc -isystem /usr/include/mit-krb5 -I/usr/in…...
计算机视觉 CV 八股分享 [自用](更新中......)
目录 一、深度学习中解决过拟合方法 二、深度学习中解决欠拟合方法 三、梯度消失和梯度爆炸 解决梯度消失的方法 解决梯度爆炸的方法 四、神经网络权重初始化方法 五、梯度下降法 六、BatchNorm 七、归一化方法 八、卷积 九、池化 十、激活函数 十一、预训练 十二…...
【MHA】MySQL高可用MHA源码1-主库故障监控
1 阅读之前的准备工作 1 一个IDE工具 ,博主自己尝试了vscode安装perl的插件,但是函数 、变量 、模块等都不能跳转,阅读起来不是很方便。后来尝试使用了pycharm安装perl插件,阅读支持跳转,自己也能写一些简单的测试样例…...
如何一键清除文件目录下所有的node_modules
如何一键清除文件目录下所有的node_modules 快速删除目录下的node_modules,下面附上windows和mac的脚本指令 windows脚本 FOR /d /r . %d in (node_modules) DO IF EXIST "%d" rm -rf "%d"mac脚本 find . -name "node_modules" -…...
【产品经理修炼之道】- 导航架构设计
目录 一、导航是什么 二、导航的作用 三、导航的分类 四、导航菜单的广度与深度 五、导航的颜色 六、导航的形态 七、导航的研究 八、导航的设计 九、导航改版案例分享 总结 每个网页的设计都需要包括导航,那么导航架构该如何设计?作者结合之前…...
本地部署和运行大型语言模型(Large Language Models, LLMs)的工具Ollama
文章目录 本地部署和运行大型语言模型(Large Language Models, LLMs)的工具Ollama背景什么是Ollama主要功能优势 使用场景Ollama LangChain 实现本地运行Llama 3 本地部署和运行大型语言模型(Large Language Models, LLMs)的工具…...
Python-100-Days: Day01
Day01 Python简介 1.1989年Guido von Rossum在圣诞节之夜开始着手python语言编译器的编写。 2.1991年2月 Python v1 编译器诞生,使用C实现的,此时可以调用C的库函数。 3.1994年1月,Python v1.0 正式版发布。 4.2000年10月16日࿰…...
g 对象:Flask 应用中的“临时口袋”
文章目录 g对象的理解Flask 中的 g 对象g 对象的特点:使用 g 对象: 示例 g对象的理解 想象一下,你在逛超市。你需要一个购物篮来装你挑选的商品。这个购物篮就像 Flask 应用中的 g 对象,它是一个临时存放东西的地方,方便你在购物过程中随时取…...
JavaEE初阶——多线程(七)——定时器
T04BF 👋专栏: 算法|JAVA|MySQL|C语言 🫵 小比特 大梦想 此篇文章与大家分享多线程的第七篇文章——关于定时器 如果有不足的或者错误的请您指出! 目录 4.定时器4.1标准库提供的定时器4.2自己实现一个定时器4.2.1任务类4.2.2Timer类4.2.3 有一个线程来负…...
嵌入式4-24
作业: 整理思维导图 定义一个矩形类Rec,包含私有属性length,width,有以下成员函数: void set_length(int l); //设置长度 void set_width(int w); //设置宽度 int get_length(); //获取长度 int get_width(); //获取宽…...
跟我学C++中级篇——临时对象
一、临时对象 Temporary object,临时对象。一听名字就明白,这个对象的意义不大,只是临时中转一下或者存在一下,有的可能连个存在感都刷不到就消失了。但不要小看这种临时对象,对C/C这种以效率严苛为前提的编程环境下&…...
【S32K3 MCAL配置】-7.1-GPT Driver:定时器中断-创建一个周期执行的任务
"><--返回「Autosar_MCAL高阶配置」专栏主页--> 案例背景:常用于周期点亮/关闭一个LED灯;或者精度一般的占空比为50% PWM方波;或者周期调用一个函数,在该函数中我们可以执行一些软件策略(简易的OS)。 目录(共15页精讲,基于评估板: NXP S32K312EVB-Q172,…...
java可盈保险合同管理系统的设计与实现(springboot+mysql源码+文档)
风定落花生,歌声逐流水,大家好我是风歌,混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的可盈保险合同管理系统。项目源码以及部署相关请联系风歌,文末附上联系信息 。 项目简介: 基于Spring Boot的…...
【智能算法】囊状虫群算法(TSA)原理及实现
目录 1.背景2.算法原理2.1算法思想2.2算法过程 3.结果展示4.参考文献 1.背景 2020年,S Kaur等人受到囊状虫群自然行为启发,提出了囊状虫群算法(Tunicate Swarm Algorithm, TSA)。 2.算法原理 2.1算法思想 TSA模拟了囊状虫群在导…...
python基础——正则表达式
📝前言: 这篇文章主要想讲解一下python中的正则表达式: 1,什么是正则表达式 2,re模块三匹配 3,元字符匹配 4,具体示例 🎬个人简介:努力学习ing 📋个人专栏&am…...
T1级,生产环境事故—Shell脚本一键备份K8s的YAML文件
大家好,我叫秋意零。 最近对公司进行日常运维工作时,出现了一个 T1 级别事故。导致公司的“酒云网”APP的无法使用。我和我领导一起搞了一个多小时,业务也停了一个多小时。 起因是:我的部门直系领导,叫我**删除一个 …...
C语言程序设计:预处理命令
预处理命令 基础知识 预处理命令简介 C语言的预处理命令是指编译之前由预处理器执行的指令,用于在源代码中进行一些预处理操作。 常见预处理命令 (1) #define 定义一个宏,用于替换源代码中的标识符为指定的文本。 #define MAX_NUM 100 int arr[MAX_NU…...
C++ 中的 struct 和 Class
通常struct用于表示一组相关的数据,而Class用于表示一个封装了数据和操作的对象。如果只是用于来组织一些数据,而不涉及复杂的封装和继承关系,则struct更为直观;如果需要封装、继承等面向对象编程的特性,可以选择使用C…...
基于Qt的二维码生成与识别
基于Qt的二维码生成与识别 一、获取QZxing开源库 1.通过封装的QZxing开源库生成和识别二维码,下载地址:GitCode - 开发者的代码家园https://gitcode.com/mirrors/ftylitak/qzxing/tree/master。 2.下载解压后,使用Qt Creator xx࿰…...
docker 基本命令
目录 一、docker 镜像操作命令 1.1.查询软件镜像 1.2.docker pull:下载镜像 1.3.docker push:上传镜像 1.4.docker images:查看本地镜像 1.5.docker inspect :获取镜像详细信息 1.6.docker tag:添加镜像标签 …...
h5键盘弹出收起时引起的页面变化
h5键盘弹出收起时引起的页面变化 键盘弹出时会导致窗口发生变化,置于底部的操作项会被顶上来,所以在键盘弹出的时候处理一下页面节点 通过监听页面窗口大小变化判断键盘状态键盘弹出时隐藏底部操作项在页面加载完成时执行即可 export function keyboa…...
Redis入门到实战教程(基础篇)笔记
教学来源: Redis课程介绍导学_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1cr4y1671t?p1一、Redis 入门 1.认识NoSQL 2.Redis在虚拟机中的安装和开机自启 Redis在虚拟机中安装和配置开机自启-CSDN博客https://blog.csdn.net/qq_69183322/article/deta…...
启动MySQL服务
在 Windows 系统上: 首先,找到 MySQL 安装目录,一般默认是在 C:\Program Files\MySQL 文件夹下。进入该目录下的 bin 文件夹。找到 mysqld.exe 文件,双击运行它。 在 Linux 系统(以 CentOS 为例)ÿ…...
Windows上构建 Chisel-Bootcamp
windows环境构建本地Chisel-Bootcamp 安装摘要Chisel-boocamp环境搭建安装java安装Anaconda安装scala 下载Chisel-bootcamp 环境Reference 安装摘要 在windows上安装chisel-boocamp,与linux过程类似。 安装java8安装anaconda安装scala下载Chisel-bootcamp环境 Ch…...
Spring Bean依赖注入-Spring入门(二)
1、SpringBean概述 在Spring中,一切Java对象都被视为Bean,用于实现某个具体功能。 Bean的依赖关系注入的过程,也称为Bean的装配过程。 Bean的装配方式有3种: XML配置文件注解Java类 Spring中常用的两种装配方式分别是基于XML的…...
java中spring底层核心原理解析(1)
相关系列 java中spring底层核心原理解析(2)-CSDN博客 总起 本章主要是讲以下的内容 Bean的生命周期底层原理依赖注入底层原理初始化底层原理推断构造方法底层原理 先看spring入门代码: ClassPathXmlApplicationContext context new ClassPathXmlApplicationCo…...
Neo-reGeorg明文流量
Neo-reGeorg 1 同IP对,同一个URI,第一个TCP流是“GET”请求,随后的TCP流请求为“POST”。(jsp\jspx\php) 2 第一个TCP流中,GET只有一个会话。(jsp\jspx\php),响应body79…...
科技渔业,智慧守护:4G+北斗太阳能定位终端准确定位,防拆卸报警,夯实渔业管理水平
如何高效地管理渔船,有效监控禁渔区域,4G北斗太阳能定位终端应运而生,成为渔业管理的重要应用工具。 我国作为全球渔业的重要国家,渔业一直是沿海地区传统的支柱产业,对经济的繁荣和民生的稳定起着至关重要的作用。因…...
【Elasticsearch】Elasticsearch 从入门到精通(二):基础使用
《Elasticsearch 从入门到精通》共包含以下 2 2 2 篇文章: Elasticsearch 从入门到精通(一):基本介绍Elasticsearch 从入门到精通(二):基础使用 😊 如果您觉得这篇文章有用 ✔️ 的…...
基于DEAP数据集的四种机器学习方法的情绪分类
在机器学习领域,KNN(K-Nearest Neighbors)、SVM(Support Vector Machine)、决策树(Decision Tree)和随机森林(Random Forest)是常见且广泛应用的算法。 介绍 1. KNN&am…...
离散数学之一阶逻辑基本概念与等值演算思维导图+大纲笔记(期末复习,考研,学习笔记,知识点总结)
大纲笔记 基本概念 一阶逻辑命题符号化 个体词 个体常项 个体变项 个体域 个体总域 谓词 谓词常项 谓词变项 零元谓词 特性谓词 引入规则 量词 全称量词 存在量词 一阶逻辑1公式及解释 基本概念 原子公式 谓词公式 自由变元与约束变元 自由变元 换名规则 约束变元 带入规则 闭…...
nvm的下载与安装
nvm(Node Version Manager)是一个用于管理 Node.js 版本的工具,它允许您在同一台计算机上安装和切换不同的 Node.js 版本。 一、下载地址 https://github.com/coreybutler/nvm-windows/releases 二、安装nvm 三、设置环境变量 在命令提示…...
代码随想录算法训练营第五十二天|300.最长递增子序列、674.最长连续递增序列、718.最长重复子数组
文档链接:https://programmercarl.com/ LeetCode300.最长递增子序列 题目链接:https://leetcode.cn/problems/longest-increasing-subsequence/ 思路:每次遇到一个新系列总是想不出来。 dp[i]:以nums[i]为尾的最长递增子序列的…...
SQL表连接详解:JOIN与逗号(,)的使用及其性能影响
省流版 在这个详细的解释中,我们将深入探讨SQL中表连接的概念,特别是JOIN和逗号(,)在连接表时的不同用法及其对查询性能的影响。通过实际示例和背后的逻辑分析,我们将揭示在不同场景下选择哪种连接方式更为合适。 1.…...
docker如何查看对外暴露接口
在Docker的世界里,了解如何查看容器对外暴露的接口是管理Docker应用的关键技能之一。暴露接口允许外部世界与容器内部的服务进行通信,是实现服务交互和持续集成/持续部署(CI/CD)管道的基础。本文将深入探讨Docker中暴露接口的机制…...
RTU遥测终端为城市排水安全保驾护航!
近年来,全球气候变迁与城市化进程不断加速,导致强降雨事件频发,道路低洼地带、下穿式立交桥和隧道等区域在暴雨中常易积水,严重阻碍了人民的出行,甚至危及生命与财产安全。而传统的排水管网管理方式已难以适应现代城市…...
【002_音频开发_基础篇_Linux音频架构简介】
002_音频开发_基础篇_Linux音频架构简介 文章目录 002_音频开发_基础篇_Linux音频架构简介创作背景Linux 音频架构ALSA 简介ASoC 驱动硬件架构软件架构MachinePlatformCodec ASoC 驱动 PCMALSA设备文件结构 ALSA 使用常用概念alsa-libALSA Open 流程ALSA Write 流程2种写入方法…...
C++对象的初始化和处理
生活中我们买的电子产品都基本会有出厂设置!在某一天我们不用时候也会删除一些自己信息数据保证安全。 C中的面向对象来源于生活,每个对象也都会有初始设置以及对象销毁前的清理数据的设置。 构造函数和析构函数 对象的初始化和清理也是两个非常重要的安全问题 一…...
【开源】使用Python+Flask+Mysql快速开发一个用户增删改查系统
项目演示 项目本身很简单,增删改查是几乎所有系统的骨架。正所谓万丈高楼平地起,学会了增删改查,航母就指日可待了:),光速入门,直接看演示图: 项目地址 https://github.com/mudf…...
10.Godot Input与自定义单例的使用
单例 单例是一个可以在任何一个脚本中对其进行直接访问的对象,分为内置单例与自定义单例。每个单例都是独一无二的对象。内置单例不是节点,主要成员是各类 Server,开发者可以使用它们直接控制游戏程序的图形与音效等内容。此外,还…...
浅谈rDNS在IP情报建设中的应用
在当今数字化世界中,互联网已经成为人们日常生活和商业活动中不可或缺的一部分。在这个庞大而复杂的网络生态系统中,IP地址是连接和识别各种网络设备和服务的基础。然而,仅仅知道一个设备的IP地址并不足以充分理解其在网络中的角色和行为。为…...
探索 Chrome 插件开发之旅
浏览器扩展程序拥有无限可能性,它们能丰富我们的浏览体验,提升工作效率,甚至改变网络世界的交互方式。谷歌 Chrome 浏览器的插件生态尤为繁荣,本文将引导你走进 Chrome 插件开发的世界,从入门基础知识到实战案例&#…...
ubuntu CUDA 驱动更新,版本更新,多CUDA版本管理
1 新版本驱动下载 前面介绍过window CUDA驱动更新,但是对于ubuntu 的驱动更新,没有一键操作。 本人笔记本电脑n年前装的CUDA DRIVER仅支持到cuda10.2,实在无法满足这日新月异的科技更新。 左 旧的驱动版本 右 新下载的硬件支持的驱动版本&…...
pg数据库的热备
Pg数据库主从复制 前言:公司的一台服务器因为断电导致系统损坏,经过3天的抢修,将服务器和数据恢复。为了避免数据的丢失,先将数据备份,并进行高可用。 采用技术:keepalivedpg 后期并实现zabbix…...
韵搜坊 -- 前端整合Axios(联调后端)
文章目录 安装配置发送请求 官网:https://www.axios-http.cn/docs/intro 安装 npm install axios配置 坐标:plugins/myAxios.ts import axios from "axios";const instance axios.create({baseURL: "http://localhost:8101/api"…...
xlrd库详解:轻松读取Excel文件
xlrd库详解:轻松读取Excel文件 在处理Excel文件时,Python的xlrd库是一个非常有用的工具。xlrd允许你读取Excel文件,并从中提取数据。下面我们将详细介绍如何使用xlrd库来读取Excel文件。 1、安装xlrd库 首先,你需要安装xlrd库。你可以使用pip来安装: pip install xlrd…...
记录Spring Boot 2.3.4.RELEASE版注解方式实现AOP和通知的执行顺序
1.advice 按照以下的顺序执行 输出结果:(正常和异常) 说明:Spring boot 2.3.4.RELEASE 版本使用的AOP是spring-aop-5.2.9.RELEASE,AOP的通知顺序不一样。 可以测试下Spring boot 2.1.1.RELEASE 版做对比,发现结果是不一样的。 2…...
思科模拟器学习1--Vlan Trunk
实验说明:将三台电脑的vlan 加到一台交换机里面,为了验证什么是虚拟局域网,把一个设备隔成三个空间,三个电脑互相不能通讯;目的是:vlan 1的通讯不可以向vlan 2传送,就是消息传送互不干扰的&…...
linux利用yum下载rpm离线包
下载到仓库 通过--downloadonly参数可以只下载不安装,下载后的rpm包保存在目录 /var/cache/yum/x86_64/[centos/fedora-version]/[repository]/packages$ sudo yum install --downloadonly <package-name>下载到指定目录 yum install --downloadonly --dow…...
VMware Fusion 13.5.2 for Mac 发布,产品订阅模式首个重大变更
VMware Fusion 13.5.2 for Mac 发布,产品订阅模式首个重大变更 适用于基于 Intel 处理器和搭载 Apple 芯片的 Mac 的桌面虚拟化软件 请访问原文链接:https://sysin.org/blog/vmware-fusion-13/,查看最新版。原创作品,转载请保留…...
停车场车位引导管理系统工作原理是什么,由哪些软硬件设备组成?
在现代城市中,随着汽车保有量的持续增长,停车难成为了许多城市面临的共同问题。有效管理停车场资源,提高车位利用率,减少寻找停车位的时间,对于缓解交通拥堵、提高城市运行效率具有重要意义。车位引导管理系统正是为了…...
JVM运行时内存:虚拟机栈
文章目录 1. 概述2. 栈针3. 栈针内部结构3.1 局部变量表3.2 操作数栈3.3 动态链接3.4 方法返回地址3.5 一些附加信息 运行时内存整体结构如下图所示: 1. 概述 如何理解栈管运行,堆管存储? 角度一:GC;OOM角度二:栈、堆执行效率角…...
二分查找:74搜索二维矩阵
74:搜索二维矩阵 思路:根据二维矩阵的定义是从左到右依次递增且这一行的第一个数大于前一行的最后一个数的思路我们可以先确定行的位置,再确定列的位置。 方法1:将二维矩阵按照行转化为一维的。 思路:首先确定循环不…...
CRWU凯斯西储大学轴承数据,12k频率,十分类
CRWU凯斯西储大学轴承数据,12k频率,十分类。 from torch.utils.data import Dataset, DataLoader from scipy.io import loadmat import numpy as np import os from sklearn import preprocessing # 0-1编码 from sklearn.model_selection import Str…...