【项目_05】tabcontrol的搭建及回显、使用keep-alive缓存页面、移动端适配 | 基于Vue3全家桶

news2025/1/15 0:46:47

💭💭

✨:tabcontrol的搭建及回显、使用keep-alive缓存页面

💟:东非不开森的主页

💜: 总不能还没努力就向生活妥协吧💜💜

🌸: 如有错误或不足之处,希望可以指正,非常感谢😉

旅途拾景

    • 一、tabcontrol的搭建及回显
      • 1.1.使用vant组件库搭建
      • 1.2.自己写组件(options api)
      • 1.3.自定义组件(composition api)
    • 二、使用keep-alive(切换页面)
      • keep-alive
    • 三、浏览器适配

一、tabcontrol的搭建及回显

1.1.使用vant组件库搭建

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

1.2.自己写组件(options api)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.3.自定义组件(composition api)

在这里插入图片描述
在这里插入图片描述

二、使用keep-alive(切换页面)

  • 对home页面进行缓存

在这里插入图片描述
在这里插入图片描述

  • 但是切换其它页面home页面还会发送网络请求
  • 因为我们scrollTop监听的是window
  • 所以对整个页面进行滚动和返回位置进行记录

在这里插入图片描述
在这里插入图片描述

keep-alive

keep-alive有一些属性

  • include ,只有名称匹配的组件会被缓存;
  • exclude,任何名称匹配的组件都不会被缓存;
  • max 最多可以缓存多少组件实例,一旦达到这个数
    字,那么缓存组件中最近没有被访问的实例会被销毁;

include 和 exclude prop 允许组件有条件地缓存

  • 二者都可以用逗号分隔字符串、正则表达式或一个数组来表示;
  • 匹配首先检查组件自身的 name 选项;

三、浏览器适配

postcss

  • 下载这个插件,并且添加配置文件post.config.js

在这里插入图片描述
移动端适配方案:
blabla~想写的时候再写吧,
先这样吧QAQ
(这部分并没有写完,突然发现在草稿箱了,先发一下吧,有机会再整吧~,鸽了好久了QAQ)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/79053.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【双向ConvLSTM Network:遥感融合】

D2TNet: A ConvLSTM Network With Dual-Direction Transfer for Pan-Sharpening (D2TNet: 双向传输的卷积长短期记忆递归神经网络用于泛锐化) 本文提出了一种高效的具有双向传输的卷积长短期记忆递归神经网络(convolutional long short-ter…

Java Agent 探针技术

Java 中的 Agent 技术可以让我们无侵入性的去进行代理,最常用于程序调试、热部署、性能诊断分析等场景,现如今比较火热的分布式链路追踪项目Skywalking,就是通过探针技术去捕获日志,将数据上报OAP观察分析平台。 Java Agent 技术简…

Socket编程实现TCP、UDP样例

文章目录一.Socket简介二.Socket实现TCPTCP通信简介使用对象及方法简介代码实现服务端代码客户端代码三.Socket实现UDPUDP通信简介UDP程序的使用步骤代码实现服务端代码客户端代码一.Socket简介 socket套接字是通信的基石,是支持TCP/IP协议的路通信的基本操作单元.…

私企招聘:思特威社会招聘

关于我们 思特威(上海)电子科技股份有限公司 SmartSens Technology (股票简称:思特威,股票代码:688213)是一家从事CMOS图像传感器芯片产品研发、设计和销售的高新技术企业,总部设立…

pads logic 生成参考编号带分隔符以及不统计不贴元器件的BOM

1.查看BOM报告 ,这里可以通过下面的方法 Step1:点击文件 Step2: 勾选材料清单,然后点击设置 Step3:在弹出的如下窗口,选择剪切板视图 ,然后选择全选,然后复制,将数据粘贴到excel表格中即可。 2. 参考编号分隔符 …

以前不知道字节面试难在哪,现在体验到了,被虐的很惨

…(这里省略一些不清楚、不知道、忘记了之类的词藻,保留一丝尊严。) 接下来是关于redis哲学三连“是什么?为什么?怎么用?” 我把肚子里仅有的关于Redis的一滴墨水挤成了三滴,仍然没有给出他想要的。继续追问Redis的数据存储方式,操作方法…

微服务框架 SpringCloud微服务架构 微服务保护 30 初识Sentinel 30.1 雪崩问题及解决方案

微服务框架 【SpringCloudRabbitMQDockerRedis搜索分布式,系统详解springcloud微服务技术栈课程|黑马程序员Java微服务】 微服务保护 文章目录微服务框架微服务保护30 初识Sentinel30.1 雪崩问题及解决方案30.1.1 雪崩问题30.1.2 总结30 初识Sentinel 30.1 雪崩问…

类别不平衡Class-imbalance解决方法

类别不平衡是指分类任务中不同类别的训练样例数目差别很大的情况。 1、扩大数据集 2、欠采样 欠采样(under-sampling):对大类的数据样本进行采样来减少该类数据样本的个数,使其与其他类数目接近,然后再进行学习。 随…

第十四届蓝桥杯集训——JavaC组第九篇——位运算符

第十四届蓝桥杯集训——JavaC组第九篇——位运算符 目录 第十四届蓝桥杯集训——JavaC组第九篇——位运算符 值交换 异或值交换 其它位移符号&#xff1a; 这个稍微难度大一些&#xff0c;基础的有【&与、|或、^异或、<<左位移、>>右位移】。 我们一个一个…

游戏开发43课 移动游戏性能优化2

2. 资源优化 病从口入&#xff0c;资源好比是入口&#xff0c;它们若出现问题&#xff0c;会引发一连串性能问题。相反&#xff0c;资源若是优化得好&#xff0c;后面所有章节的性能都可受益。这也是把资源优化的章节提到最前的原因。 2.1 纹理优化 纹理优化的目的是让它们占…

多锦鑫能:低碳化、智能化、无人化矿山运营时代来临

全球气候变暖已经成为人类社会必须面对的重大课题&#xff0c;国际社会在推动节能减排、实现碳中和大目标上也已经达成一致意见。中国作为全球第二大经济体和负责任的大国&#xff0c;也明确向国际社会承诺&#xff0c;将在2030年实现碳达峰、2060年前实现碳中和目标。 围绕这…

[附源码]计算机毕业设计基于Vuejs的中国名茶销售平台Springboot程序

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

作者推荐 | 【分布式技术专题】「架构设计方案」图解学习法总结集群模式下的各种软负载均衡策略实现及原理分析

背景介绍 在分布式系统中&#xff0c;负载均衡是非常重要的环节&#xff0c;通过负载均衡将请求派发到网络中的一个或多个节点上进行处理。 通常来说&#xff0c;负载均衡分为硬件负载均衡及软件负载均衡。硬件负载均衡&#xff0c;顾名思义&#xff0c;在服务器节点之间安装专…

功能安全软件架构

已剪辑自: https://mp.weixin.qq.com/s/pCenGTqg2Xi_t7b8ebNHMA 1. E-GAS 安全架构思想 汽车功能安全旨在把电子电气系统失效而导致的人身危害风险控制在合理范围内。下图是常见的电子电气系统硬件构成图&#xff0c;一个电子电气系统的构成要素&#xff0c;除了图中可见的硬…

均值坐标参数化(MVC Parameterization)

欢迎关注更多精彩 关注我&#xff0c;学习常用算法与数据结构&#xff0c;一题多解&#xff0c;降维打击。 均值坐标定义 均值坐标定义 v0是多边形v1v2v3...vn内的一点v_0是多边形v_1v_2v_3...v_n内的一点v0​是多边形v1​v2​v3​...vn​内的一点 就会存在均值坐标ϕi(v0)ω…

腾讯云服务器CVM快速配置购买教程,新手上云必备!

腾讯云服务器快速配置购买教程是新手必备的上云教程。主机教程网在本文中以腾讯云服务器为例&#xff0c;给大家带来一个完整的、手把手教学的服务器购买流程。助力快速完成服务器的购买、配置、以及网站的搭建&#xff0c;给新手节省宝贵的时间&#xff0c;避免采坑&#xff0…

线程相关学习记录(1)

认识线程 什么是线程 进程&#xff1a; 正常电脑中启动的某个程序应用&#xff0c;并且会获得计算机分配的资源&#xff08;cpu&#xff0c;内存&#xff0c;硬件设备&#xff09; 线程&#xff1a; 进程中为了完成某个功能&#xff0c;内部划分出的不同的资源分配单位。通常…

[附源码]Python计算机毕业设计SSM基于框架的旅游管理系统(程序+LW)

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

MyBatis详细学习笔记

一、MyBatis简介 MyBatis是ORM框架&#xff0c;即对象关系映射框架。 二、搭建MyBatis 不同的MySQL版本使用的JDBC不同 com.mysql.jdbc.Driver // MySQL 5 com.mysql.cj.jdbc.Driver // MySQL 8不同版本的MySQL的url也不同 jdbc:mysql://localhost:3306/ssm // MySQL 5 jd…

神仙级Python办公自动化教程(非常详细),从零基础入门到精通,轻松玩转Excel,从看这篇开始

Excel是Office办公中使用非常频繁的一个表格制作、数据分析与图表制作的组件。随着现在数据处理量越来越大&#xff0c;日常办公中很多重复性工作耗费了广大办公人员越来越多的时间&#xff0c;那么如何才能化繁为简&#xff0c;提高办公自动化水平呢&#xff1f;借助Python中的…