对移动导航和背景颜色进行动画处理，而不会滞后于移动设备

分类：编程问答

如何解决对移动导航和背景颜色进行动画处理，而不会滞后于移动设备

Gif of dropdown lag

在运行的代码中可以看到；导航条在页面滚动上固定在顶部，将其徽标更改为蓝色，并且背景也为白色。 在移动设备上，菜单应该向下滑动或平滑显示，而不会在移动屏幕上很好地滞后于内容。

我一直在努力使移动菜单的下滑和背景颜色无缝平滑地动画，而不会对移动设备造成任何滞后。我尝试过max-height来设置导航栏的高度。我尝试过的所有操作都会导致我测试过的所有移动设备都滞后。

老实说，我已经两天没做到了。我用尽了所有方法，现在感到沮丧。我不知道为什么它可以在台式机上平稳运行，但是在移动设备上却严重滞后。

我该怎么办？

const logo = document.getElementById("pageLogo");
const pageBurgerIcon = document.getElementById("pageBurgerIcon");
const pageCloseMenu = document.getElementById("pageCloseMenu");
const pageMainNav = document.getElementById("pageMainNav");
const fixedNavbar = document.querySelector(".page__navigation");


document.addEventListener('scroll',() => {
  if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
    fixedNavbar.classList.add('scrolled');
    pageBurgerIcon.classList.add("active");
    logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
    
  } else {
    fixedNavbar.classList.remove('scrolled');
    pageBurgerIcon.classList.remove("active");

    if (!pageMainNav.classList.contains("opened")) {
      if (logo.classList.contains("logo-white")) {
        logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo_qtqmny.svg";
      } else {
        logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
      }
    }
  }
})

pageBurgerIcon.addEventListener("click",() => {
  pageMainNav.classList.add("opened");
  pageBurgerIcon.classList.remove("show");
  pageCloseMenu.classList.add("show");
  logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
  document.body.style.overflow = "hidden";
})


pageCloseMenu.addEventListener("click",() => {
  pageMainNav.classList.remove("opened");
  pageBurgerIcon.classList.add("show");
  pageCloseMenu.classList.remove("show");
  document.body.style.overflow = "";

  if (logo.classList.contains("logo-white")) {
    if(!fixedNavbar.classList.contains("scrolled")) {
      logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo_qtqmny.svg";
    } else {
      logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
    }
  } else {
    logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
  }
})
*,*::before,*::after {
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

body {
  box-sizing: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-family: sans-serif;
  font-size: 1.8rem;
  line-height: 2.5rem;
  color: #12213c;
}


/* Page container to make it centered across all screens */
.container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}


/* Header Styles */
.page__header {
  position: relative;
  background-color: #00aeef;
}

/* Navbar Container Styles */
.page__navigation {
  position: fixed !important;
  top: 0;
  left: 0;
  z-index: 10000 !important;
  width: 100%;
  transition: all 0.2s;
}

/* Navbar Styles*/

.page__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 0 5rem 0;
}

/* Logo */
.page__logo {
  padding-left: 6rem;
}
.page__logo-img {
  width: 30px;
  height: 30px;
}

/* Navbar menu list */
.page__menu {
  padding-right: 6rem;
}
.page__menu-icon {
  display: none;
  fill: #fff;
}
.page__menu-icon.blue {
  fill: #0066a1;
}
.page__menu a {
  text-decoration: none;
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.03em;
  color: #0066a1;
}
.page__menu a.active {
  color: #3ab449 !important;
}
.page__menu a:not(:first-of-type) {
  padding-left: 4rem;
}


/* Navigation Container on scroll settings */
.page__navigation.scrolled {
  height: 80px;
  background: #fff !important;
  box-shadow: 0 10px 10px rgba(0,0.08);
}

/* On scroll styling for the navbar which is a direct child of the navigation container */
.page__navigation.scrolled > nav.page__nav {
  padding-top: 2.5rem;
}

.page__navigation.scrolled > nav.page__nav .page__menu-icon {
  padding-top: 5px;
}
.page__navigation.scrolled > nav.page__nav .page__menu a {
  color: #0066a1;
}
.page__navigation.scrolled > nav.page__nav .page__menu a.active {
  color: #3ab449;
}



/* Page content section */
.page__intro p {
  margin-bottom: 20px;
}

/* Page content padding for space */
.page-top-padding {
  padding: 20rem 6rem 11.5rem 6rem;
}


/* Media query for mobile devices with a screen of less than or equal to 600px */

@media only screen and (max-width: 600px) {
  body {
    font-size: 1.4rem;
    line-height: 1.9rem;
  }

  /* Navbar Container */
  .page__navigation {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
  }

  /* Navbar Styles */
  .page__nav {
    position: fixed !important;
    padding: 0;
    display: block;
    top: 0;
    left: 0;
    height: 80px;
    width: 100%;
    overflow: hidden;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    z-index: 10000;
  }

  /* Navbar when opened */
  .page__nav.opened {
    height: 80%;
    background: white !important;
    box-shadow: 0px 5px 10px rgba(0,0.05);
    border-radius: 0 0 32px 32px;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
  }

  /* Navbar menu list/links styles */
  .page__nav.opened .page__menu a {
    pointer-events: auto;
    opacity: 1;
  }



  /* Navbar logo */
  .page__logo {
    padding-left: 0;
    position: relative;
    width: 102.4px;
    top: -2.5rem;
    height: 32px;
    margin: 0 auto;
  }
  /* Navbar menu */
  .page__menu {
    position: relative;
    display: block;
    padding: 70px 20px 20px 20px;
    pointer-events: none;
  }
  .page__menu a {
    pointer-events: none;
    opacity: 0;
    display: block;
    position: relative;
    font-size: 25px;
    margin-bottom: 40px;
    line-height: 130%;
    text-align: center;
    color: #12213c !important;
    width: 100%;
    padding-left: 0;
    transition: all 0.3s;
  }
  .page__menu a:not(:first-of-type) {
    padding-left: 0 !important;
  }
  .page__menu-icon {
    padding-left: 16px;
    padding-top: 25px;
    width: 24px;
    height: 20px;
  }
  .page__menu-icon.show {
    display: inline-block;
  }
  .page__menu-icon.white {
    fill: #fff;
  }
  .page__menu-icon.dark {
    fill: #12213c;
  }
  .page__menu-icon.active {
    fill: #00aeef !important;
  }


  /* Navbar content padding */

  .page-top-padding {
    padding: 10rem 2rem 11.5rem 2rem;
  }
}
<!-- Page Container -->
  <div class="container" id="container">
    <!-- Page Header ? Top Section-->
    <header class="page__header page__header-home">
      <!-- Navbar Container -->
      <div class="page__navigation">

        <!-- Navbar Container -->
        <nav class="page__nav" id="pageMainNav">
          <svg width="24" height="20" viewBox="0 0 24 20" xmlns="http://www.w3.org/2000/svg" class="page__menu-icon show white" id="pageBurgerIcon">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H12V2.85715H0V0ZM24 8.5713V11.4285H0V8.5713H24ZM18 17.1429H0V20.0001H18V17.1429Z"/>
          </svg>
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="page__menu-icon" id="pageCloseMenu">
            <path d="M11.9997 10L20 18.0003L18.0003 20L10 11.9997L1.99966 20L0 18.0003L8.00034 10L0 1.99966L1.99966 0L10 8.00034L18.0003 0L20 1.99966L11.9997 10Z" fill="#00AEEF"/>
          </svg>
            
          <div class="page__logo">
            <a href="/">
              <img src="https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo_qtqmny.svg" alt="page Logo" class="page__logo-img logo-white" id="pageLogo">
            </a>
          </div>

          <div class="page__menu home">
            <a href="">Menu 1</a>
            <a href="">Menu 2</a>
            <a href="">Menu 3</a>
            <a href="">Menu 4</a>
          </div>

        </nav>
      </div>
      
      <!-- Intro/Top Section -->
      <section class="page__intro page-top-padding">
        <p>Lorem ipsum dolor sit amet consectetur,adipisicing elit. Eius,porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
        <p>Lorem ipsum dolor sit amet consectetur,porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
      </section>
    </header>

  </div>

解决方法

您在padding类上设置的height和.scroll似乎很震撼。

从这些部分：

/* Navigation Container on scroll settings */
.page__navigation.scrolled {
  height: 80px;
  background: #fff !important;
  box-shadow: 0 10px 10px rgba(0,0.08);
}

/* On scroll styling for the navbar which is a direct child of the navigation container */
.page__navigation.scrolled > nav.page__nav {
  padding-top: 2.5rem;
}

.page__navigation.scrolled > nav.page__nav .page__menu-icon {
  padding-top: 5px;
}

这是您想要的吗？

const logo = document.getElementById("pageLogo");
const pageBurgerIcon = document.getElementById("pageBurgerIcon");
const pageCloseMenu = document.getElementById("pageCloseMenu");
const pageMainNav = document.getElementById("pageMainNav");
const fixedNavbar = document.querySelector(".page__navigation");


document.addEventListener('scroll',() => {
  if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
    fixedNavbar.classList.add('scrolled');
    pageBurgerIcon.classList.add("active");
    logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";

  } else {
    fixedNavbar.classList.remove('scrolled');
    pageBurgerIcon.classList.remove("active");

    if (!pageMainNav.classList.contains("opened")) {
      if (logo.classList.contains("logo-white")) {
        logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo_qtqmny.svg";
      } else {
        logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
      }
    }
  }
})

pageBurgerIcon.addEventListener("click",() => {
  pageMainNav.classList.add("opened");
  pageBurgerIcon.classList.remove("show");
  pageCloseMenu.classList.add("show");
  logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
  document.body.style.overflow = "hidden";
})


pageCloseMenu.addEventListener("click",() => {
  pageMainNav.classList.remove("opened");
  pageBurgerIcon.classList.add("show");
  pageCloseMenu.classList.remove("show");
  document.body.style.overflow = "";

  if (logo.classList.contains("logo-white")) {
    if (!fixedNavbar.classList.contains("scrolled")) {
      logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo_qtqmny.svg";
    } else {
      logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
    }
  } else {
    logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
  }
})
*,*::before,*::after {
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

body {
  box-sizing: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-family: sans-serif;
  font-size: 1.8rem;
  line-height: 2.5rem;
  color: #12213c;
}


/* Page coontainer to make it centered across all screens */
.container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}


/* Header Styles */
.page__header {
  position: relative;
  background-color: #00aeef;
}

/* Navbar Container Styles */
.page__navigation {
  position: fixed !important;
  top: 0;
  left: 0;
  z-index: 10000 !important;
  width: 100%;
  height: 80px;
  transition: all 0.2s;
}

/* Navbar Styles*/

.page__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 0 5rem 0;
}

/* Logo */
.page__logo {
  padding-left: 6rem;
}
.page__logo-img {
  width: 30px;
  height: 30px;
}

/* Navbar menu list */
.page__menu {
  padding-right: 6rem;
}
.page__menu-icon {
  display: none;
  fill: #fff;
}
.page__menu-icon.blue {
  fill: #0066a1;
}
.page__menu a {
  text-decoration: none;
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.03em;
  color: #0066a1;
}
.page__menu a.active {
  color: #3ab449 !important;
}
.page__menu a:not(:first-of-type) {
  padding-left: 4rem;
}


/* Naviagtion Container on scroll settings */
.page__navigation.scrolled {
  background: #fff !important;
  box-shadow: 0 10px 10px rgba(0,0.08);
}

/* On scroll styling for the navbar which is a direct child of the navigation container */
.page__navigation.scrolled > nav.page__nav .page__menu a {
  color: #0066a1;
}
.page__navigation.scrolled > nav.page__nav .page__menu a.active {
  color: #3ab449;
}



/* Page content section */
.page__intro p {
  margin-bottom: 20px;
}

/* Page content padding for space */
.page-top-padding {
  padding: 20rem 6rem 11.5rem 6rem;
}


/* Media query for mobile devices with a screen of less than or equal to 600px */

@media only screen and (max-width: 600px) {
  body {
    font-size: 1.4rem;
    line-height: 1.9rem;
  }

  /* Navbar Container */
  .page__navigation {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
  }

  /* Navbar Styles */
  .page__nav {
    position: fixed !important;
    padding: 0;
    display: block;
    top: 0;
    left: 0;
    height: 80px;
    width: 100%;
    overflow: hidden;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    z-index: 10000;
  }

  /* Navbar when opened */
  .page__nav.opened {
    height: 80%;
    background: white !important;
    box-shadow: 0px 5px 10px rgba(0,0.05);
    border-radius: 0 0 32px 32px;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
  }

  /* Navbar menu list/links styles */
  .page__nav.opened .page__menu a {
    pointer-events: auto;
    opacity: 1;
  }



  /* Navbar logo */
  .page__logo {
    padding-left: 0;
    position: relative;
    width: 102.4px;
    top: -2.5rem;
    height: 32px;
    margin: 0 auto;
  }
  /* Navbar menu */
  .page__menu {
    position: relative;
    display: block;
    padding: 70px 20px 20px 20px;
    pointer-events: none;
  }
  .page__menu a {
    pointer-events: none;
    opacity: 0;
    display: block;
    position: relative;
    font-size: 25px;
    margin-bottom: 40px;
    line-height: 130%;
    text-align: center;
    color: #12213c !important;
    width: 100%;
    padding-left: 0;
    transition: all 0.3s;
  }
  .page__menu a:not(:first-of-type) {
    padding-left: 0 !important;
  }
  .page__menu-icon {
    padding-left: 16px;
    padding-top: 25px;
    width: 24px;
    height: 20px;
  }
  .page__menu-icon.show {
    display: inline-block;
  }
  .page__menu-icon.white {
    fill: #fff;
  }
  .page__menu-icon.dark {
    fill: #12213c;
  }
  .page__menu-icon.active {
    fill: #00aeef !important;
  }


  /* Navbar content padding */

  .page-top-padding {
    padding: 10rem 2rem 11.5rem 2rem;
  }
}
<!-- Page Container -->
<div class="container" id="container">
  <!-- Page Header ? Top Section-->
  <header class="page__header page__header-home">
    <!-- Navbar Container -->
    <div class="page__navigation">

      <!-- Navbar Container -->
      <nav class="page__nav" id="pageMainNav">
        <svg width="24" height="20" viewBox="0 0 24 20" xmlns="http://www.w3.org/2000/svg" class="page__menu-icon show white" id="pageBurgerIcon">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H12V2.85715H0V0ZM24 8.5713V11.4285H0V8.5713H24ZM18 17.1429H0V20.0001H18V17.1429Z"/>
          </svg>
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="page__menu-icon" id="pageCloseMenu">
            <path d="M11.9997 10L20 18.0003L18.0003 20L10 11.9997L1.99966 20L0 18.0003L8.00034 10L0 1.99966L1.99966 0L10 8.00034L18.0003 0L20 1.99966L11.9997 10Z" fill="#00AEEF"/>
          </svg>

        <div class="page__logo">
          <a href="/">
            <img src="https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo_qtqmny.svg" alt="page Logo" class="page__logo-img logo-white" id="pageLogo">
          </a>
        </div>

        <div class="page__menu home">
          <a href="">Menu 1</a>
          <a href="">Menu 2</a>
          <a href="">Menu 3</a>
          <a href="">Menu 4</a>
        </div>

      </nav>
    </div>

    <!-- Intro/Top Section -->
    <section class="page__intro page-top-padding">
      <p>Lorem ipsum dolor sit amet consectetur,adipisicing elit. Eius,porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
      <p>Lorem ipsum dolor sit amet consectetur,porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
    </section>
  </header>

</div>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错：更换其他版本 无法下载依赖可参考：https://blog.csdn.net/weixin_42628809/a
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
微服务启动错误：Command line is too long. Shorten command line for
解决方案1 1、改项目中.idea/workspace.xml配置文件，增加dynamic.classpath参数 2、搜索PropertiesComponent，添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
vue常见错误
删除根组件app.vue中的默认代码后报错：Module Error (from ./node_modules/eslint-loader/index.js): 解决方案：关闭ESlint代码检测，在项目根目录创建vue.config.js，在文件中添加 module.exports = { lin
spark常见错误
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot