前端小练-平台首页介绍+动画

news/2024/11/18 2:49:13/

文章目录

  • 前言
  • 结构
  • 头部
    • 外部容器
    • 文字
  • 主体
    • 小球动画
    • 打字机动画
      • 特效实现
      • 监控
  • 完整代码
  • 总结

前言

时间飞逝，快大四了，刚好最近看不下去考研的，而且要准备这个毕设选题了，然后就想着怎么能够把自己所学的东西都用上，一开始是打算做操作系统的，但是难度还是有点大，最重要的是，除了锻炼自己没有太大的意义，最起码以后，在我的代码库当中可能用不上，所以我就想换一样，于是我打算做一个AI算法开放平台。其实也就是开放API，让后让大家调用。目前是打算集成6个算法，其实也是我以前做过的，老粉应该是知道的，我就不废话 了。

那么来看看今天，做出的一个首页的效果吧：

请添加图片描述
那么这个页面的话，也是使用这个vue3 做的一个开放。

结构

我们先来看看这个页面的一个基本结构。那么首先的话，这个整个页面是采用Flex布局做的。
在这里插入图片描述

这里的话，我先分为两个部分。一个是首页头部的，那个背景图片，然后是介绍啥的。
之后是我们的主体。当然这个还没提取组件，只是一个大页面。

那么同样的，从上到下都是Flex布局。

头部

ok,我们现在一个一个模块来进行说明。首先是我们的头部模块。
在这里插入图片描述
那么这里的话，大概也是两个部分，一个是最外面的div,然后是两个里面的div,分别是上下文。

外部容器

我们先看到外部的容器。

    <div class="top zoom"><div class="title tracking-in-contract">Huterox AI </div><div class="content">Huterox 的开源 AI 算法开放平台</div></div>

在这里我们有背景图片，然后还有动画。

.top{background-position: center;flex-direction: column;width: 100%;height: 600px;display: flex;background-color: #02162e;background-image: url('../../assets/img/bg.jpg');background-size: cover;
}.zoom {/* background-size: 125%; */-webkit-animation: zoom 10s infinite alternate ease-in-out both;animation: zoom 10s infinite alternate ease-in-out both;
}
@keyframes zoom {0% {background-size: 100%;}100% {background-size: 125%;}
}

文字

之后的话，是我们的文字，文字分为两个部分，标题和内容。
那么标题的话，也是动画的。

首先是标题的动画。

.title{margin-top: 200px;font-size: 80px;color: white;display: flex;justify-content: center;align-items: center;width: 100%;height: 100px;
}
.tracking-in-contract {-webkit-animation: tracking-in-contract 5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;animation: tracking-in-contract 5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
@-webkit-keyframes tracking-in-contract {0% {letter-spacing: 1em;opacity: 0;}40% {opacity: 0.6;}100% {letter-spacing: normal;opacity: 1;}
}
@keyframes tracking-in-contract {0% {letter-spacing: 1em;opacity: 0;}40% {opacity: 0.6;}100% {letter-spacing: normal;opacity: 1;}
}

之后是我们的内容文字，这个的话，就居中就好了。


.content{font-size: 50px;display: flex;color: white;justify-content: center;align-items: center;width: 100%;height: 100px;
}

主体

然后是我们的主体的实现。
主体也是分为了5部分。
在这里插入图片描述

这里的话，内容比较多，我主要就说一下核心的实现就好了。

小球动画

首先，我们来看到，这个小球的动画
（这里说一下，这个首页的素材是由这个New Bing生成的）
在这里插入图片描述
我们主要先说这个，因为，其他的实现都是类似的，其实也是直接cv组合就好了。
首先是我们的HTML代码
在这里插入图片描述
然后，我们这个动画的话，其实主要是是由anime来做的。

    RunGui(){anime({targets: '#alternate .el',translateX: 100,direction: 'alternate',loop: true});},

打字机动画

之后的话，就是打字机的特效，这个其实也是。

特效实现

首先，我们先看到这个特效的实现。这里主要有两个点，一个是特效实现，还有一个是监控。也就是说，只有在页面滚动到那个地方的时候，我才给你加载这个动画。

首先这个是打字机的实现

 Typewriter(refDom,showString){const textContainer = refDomconst text = showStringlet charIndex = 0const animateText = () => {textContainer.innerHTML = text.slice(0, charIndex)charIndex++if (charIndex <= text.length) {anime({targets: textContainer,opacity: [1,1],duration: 100,easing: 'linear',complete: animateText})}}animateText()}

我们先定位到那个Dom，然后一个一个加元素就好了。没办法，css不会，也就会布个局。

监控

然后就是监控了。

    /*** 打字机特效，通过anime.js来实现，传入定位的Dome，显示的文字* 还有是否一直监听*/TypewriterDom(refDom,showString,runover,func){// 创建 IntersectionObserver 实例const io = new IntersectionObserver(entries => {entries.forEach(entry => {if (entry.isIntersecting) { this.Typewriter(refDom,showString)//一次就好，避免资源浪费if(func){func()}if(runover){io.unobserve(refDom);}}});});// 开始监听io.observe(refDom);},

这里我们主要通过这个IntersectionObserver来实现监控。
然后在mounted里面加载
在这里插入图片描述

完整代码

🆗，我们最后来看到我们的完整代码。

<template><div class="container"><div class="top zoom"><div class="title tracking-in-contract">Huterox AI </div><div class="content">Huterox 的开源 AI 算法开放平台</div></div><div class="main  color-change-5x"><div class="jianjie"><div class="part"><div class="partTitle">开放视觉</div><div class="partContent">图像识别，目标检测，人体关键点检测</div></div><div class="part"><div class="partTitle">数据云盘</div><div class="partContent">自定义数据集，定制化模型训练</div></div><div class="part"><div class="partTitle">内容生成</div><div class="partContent">文本到内容，2D到3D，无限可能</div></div></div><div class="jieshao"><div class="jie"><div class="jieleft zoom"></div><div class="jieright"><div class="jierighttop"><!--方块特效 --><div id="alternate"><div class="square1 el"></div></div></div><!-- 文字说明 --><div class="jierightbot" ref="box"></div></div></div></div><div class="jieshao"><div class="jie"><div class="jieleft1"><div class="jierighttop1"><!--特效 --><div id="svgAttributes"> <svg width="256" height="256" viewBox="0 0 128 128"><polygon points="64 68.8628077439766 8.574 99.98498600107975 63.240037962811925 67.54607512963132 64 3.984986001079744 64.75996203718807 67.54607512963132 119.426 99.98498600107975 " fill="currentColor"></polygon></svg> </div></div><!-- 文字说明 --><div class="jierightbot" ref="box1"></div></div><div class="jieright1 zoom"></div></div></div><!-- 第三部分的 --><div class="jieshao"><div class="jie"><div class="jieleft2 zoom"></div><div class="jieright"><div class="jierighttop1"><!--特效 --><div id="morphing"> <svg width="280" height="280" viewBox="0 0 140 140"><g fill="none" fill-rule="evenodd"><g fill="currentColor" fill-opacity=".15" transform="translate(0 6)"><polygon points="70 0 136.574 48.369 111.145 126.631 28.855 126.631 3.426 48.369"></polygon><polygon points="70 18 119.455 53.931 100.565 112.069 39.435 112.069 20.545 53.931"></polygon><polygon points="70 34.86 101.727 57.911 89.609 95.209 50.391 95.209 38.273 57.911"></polygon><polygon points="70 50.898 84.864 61.697 79.186 79.171 60.814 79.171 55.136 61.697"></polygon></g><polygon class="polymorph" stroke-width="1" stroke="currentColor" points="70 26.11463815070492 119.44960952054677 60.24460952054677 101.51329527398553 119.49685719179845 52.0989047945323 99.51636184929508 5.540638150704919 55.11534287671938 "></polygon></g></svg> </div></div><!-- 文字说明 --><div class="jierightbot" ref="box2"></div></div></div></div><!-- 底部 --><div class="footer"><!-- 特效 --><div class="footershow"><div id="penner"><div class="line"><div class="small stretched square linear" style="transform: translateX(8.32375px);"></div></div><div class="line"><div class="small stretched square InQuad" style="transform: translateX(1.41935px);"></div></div><div class="line"><div class="small stretched square InCubic" style="transform: translateX(0.872133px);"></div></div><div class="line"><div class="small stretched square InQuart" style="transform: translateX(0.302639px);"></div></div><div class="line"><div class="small stretched square InQuint" style="transform: translateX(0.552566px);"></div></div><div class="line"><div class="small stretched square InSine" style="transform: translateX(0.301091px);"></div></div><div class="line"><div class="small stretched square InExpo" style="transform: translateX(0.437774px);"></div></div><div class="line"><div class="small stretched square InCirc" style="transform: translateX(0.625275px);"></div></div><div class="line"><div class="small stretched square InBack" style="transform: translateX(-3.78142px);"></div></div><div class="line"><div class="small stretched square OutQuad" style="transform: translateX(15.4575px);"></div></div><div class="line"><div class="small stretched square OutCubic" style="transform: translateX(23.5359px);"></div></div><div class="line"><div class="small stretched square OutQuart" style="transform: translateX(38.4933px);"></div></div><div class="line"><div class="small stretched square OutQuint" style="transform: translateX(35.4011px);"></div></div><div class="line"><div class="small stretched square OutSine" style="transform: translateX(12.371px);"></div></div><div class="line"><div class="small stretched square OutExpo" style="transform: translateX(43.1485px);"></div></div><div class="line"><div class="small stretched square OutCirc" style="transform: translateX(75.0978px);"></div></div><div class="line"><div class="small stretched square OutBack" style="transform: translateX(40.8483px);"></div></div><div class="line"><div class="small stretched square InOutQuad" style="transform: translateX(0.970785px);"></div></div><div class="line"><div class="small stretched square InOutCubic" style="transform: translateX(0.805919px);"></div></div><div class="line"><div class="small stretched square InOutQuart" style="transform: translateX(0.162609px);"></div></div><div class="line"><div class="small stretched square InOutQuint" style="transform: translateX(0.130278px);"></div></div><div class="line"><div class="small stretched square InOutSine" style="transform: translateX(1.35859px);"></div></div><div class="line"><div class="small stretched square InOutExpo" style="transform: translateX(0.0959568px);"></div></div><div class="line"><div class="small stretched square InOutCirc" style="transform: translateX(1.56201px);"></div></div><div class="line"><div class="small stretched square InOutBack" style="transform: translateX(-6.36447px);"></div></div></div></div><div class="footText">Huterox is Awesome</div></div></div>    </div>
</template>
<script>
import anime from 'animejs'
export default {name:'index',mounted() {const jieright1 = "集成众多视觉算法，高效，稳定完成图像识别，目标检测，人体关键点检测等多项任务。"this.TypewriterDom(this.$refs.box,jieright1,true,this.RunGui)const jieright2 = "开放云盘，支持自定义数据集，定制化任务，快速导入数据。"this.TypewriterDom(this.$refs.box1,jieright2,true,this.RunGui1)    const jieright3 = "支持内容生成技术，文本到图像，图像2D到3D，未来可期，无所不能。"this.TypewriterDom(this.$refs.box2,jieright3,true,this.RunGui2)this.RunGui3()},methods:{RunGui3(){var penner = anime.timeline({loop: true,direction: 'alternate',duration: 150,});penner.add({targets: '#penner .linear', translateX: 1100, offset: 0,easing: 'linear',}).add({targets: '#penner .InQuad', translateX: 1100, offset: 0,easing: 'easeInQuad',}).add({targets: '#penner .InCubic', translateX: 1100, offset: 0,easing: 'easeInCubic',}).add({targets: '#penner .InQuart', translateX: 1100, offset: 0,easing: 'easeInQuart',}).add({targets: '#penner .InQuint', translateX: 1100, offset: 0,easing: 'easeInQuint',}).add({targets: '#penner .InSine', translateX: 1100, offset: 0,easing: 'easeInSine',}).add({targets: '#penner .InExpo', translateX: 1100, offset: 0,easing: 'easeInExpo',}).add({targets: '#penner .InCirc', translateX: 1100, offset: 0,easing: 'easeInCirc',}).add({targets: '#penner .InBack', translateX: 1100, offset: 0,easing: 'easeInBack',}).add({targets: '#penner .OutQuad', translateX: 1100, offset: 0,easing: 'easeOutQuad',}).add({targets: '#penner .OutCubic', translateX: 1100, offset: 0,easing: 'easeOutCubic',}).add({targets: '#penner .OutQuart', translateX: 1100, offset: 0,easing: 'easeOutQuart',}).add({targets: '#penner .OutQuint', translateX: 1100, offset: 0,easing: 'easeOutQuint',}).add({targets: '#penner .OutSine', translateX: 1100, offset: 0,easing: 'easeOutSine',}).add({targets: '#penner .OutExpo', translateX: 1100, offset: 0,easing: 'easeOutExpo',}).add({targets: '#penner .OutCirc', translateX: 1100, offset: 0,easing: 'easeOutCirc',}).add({targets: '#penner .OutBack', translateX: 1100, offset: 0,easing: 'easeOutBack',}).add({targets: '#penner .InOutQuad', translateX: 1100, offset: 0,easing: 'easeInOutQuad',}).add({targets: '#penner .InOutCubic', translateX: 1100, offset: 0,easing: 'easeInOutCubic',}).add({targets: '#penner .InOutQuart', translateX: 1100, offset: 0,easing: 'easeInOutQuart',}).add({targets: '#penner .InOutQuint', translateX: 1100, offset: 0,easing: 'easeInOutQuint',}).add({targets: '#penner .InOutSine', translateX: 1100, offset: 0,easing: 'easeInOutSine',}).add({targets: '#penner .InOutExpo', translateX: 1100, offset: 0,easing: 'easeInOutExpo',}).add({targets: '#penner .InOutCirc', translateX: 1100, offset: 0,easing: 'easeInOutCirc',}).add({targets: '#penner .InOutBack', translateX: 1100, offset: 0,easing: 'easeInOutBack',});},RunGui2(){anime({targets: '#morphing .polymorph',points: [{ value: '70 41 118.574 59.369 111.145 132.631 60.855 84.631 20.426 60.369' },{ value: '70 6 119.574 60.369 100.145 117.631 39.855 117.631 55.426 68.369' },{ value: '70 57 136.574 54.369 89.145 100.631 28.855 132.631 38.426 64.369' },{ value: '70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369' }],easing: 'easeOutQuad',duration: 2000,loop: true});},RunGui1(){anime({targets: '#svgAttributes polygon',points: '64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96',easing: 'easeInOutExpo',duration: 3000,loop: true});},RunGui(){anime({targets: '#alternate .el',translateX: 100,direction: 'alternate',loop: true});},/*** 打字机特效，通过anime.js来实现，传入定位的Dome，显示的文字* 还有是否一直监听*/TypewriterDom(refDom,showString,runover,func){// 创建 IntersectionObserver 实例const io = new IntersectionObserver(entries => {entries.forEach(entry => {if (entry.isIntersecting) { this.Typewriter(refDom,showString)//一次就好，避免资源浪费if(func){func()}if(runover){io.unobserve(refDom);}}});});// 开始监听io.observe(refDom);},Typewriter(refDom,showString){const textContainer = refDomconst text = showStringlet charIndex = 0const animateText = () => {textContainer.innerHTML = text.slice(0, charIndex)charIndex++if (charIndex <= text.length) {anime({targets: textContainer,opacity: [1,1],duration: 100,easing: 'linear',complete: animateText})}}animateText()}} 
}
</script><style scoped>.footText{display: flex;width: 100%;height: 100px;justify-content: center;align-items: center;font-size: 50px;color: whitesmoke;
}
.square{margin-left: 80px;margin-top: 2px;border-radius: 5px;width: 150px;height: 10px;background-color: #0d6cd8;
}
.footershow{display: flex;align-items: center;width: 100%;height: 400px;align-items: center;border-block-end: 3px whitesmoke solid;
}
.footer{margin-top: 1%;width: 100%;height: 600px;display: flex;flex-direction: column;
}.jieleft2{margin-left: 10%;width: 40%;height: 500px;display: flex;background-size: cover;background-position: center;border-radius: 50px;background-image: url(../../assets/img/neirong.jpg);
}.jierighttop1{justify-content: center;align-items: center;width: 100%;height: 200px;display: flex;color: whitesmoke;font-size: 30px;
}.jieright1{border-radius: 50px;background-image: url(../../assets/img/yunpan.jpg);background-size: cover;background-position: center;margin-left: 2%;width: 40%;height: 500px;display: flex;flex-direction: column;
}.jieleft1{flex-direction: column;margin-left: 10%;width: 40%;height: 500px;display: flex;
}.square1{height: 100px;border-radius: 100px;width: 100px;background-color: rgb(33, 138, 231);
}
.jierighttop{align-items: center;width: 100%;height: 200px;display: flex;color: whitesmoke;font-size: 30px;
}.jierightbot{width: 100%;height: 200px;display: flex;align-items: center;color: whitesmoke;font-size: 30px;
}
.jieright{margin-left: 2%;width: 40%;height: 500px;display: flex;flex-direction: column;
}.jieleft{margin-left: 10%;width: 40%;height: 500px;display: flex;background-size: cover;background-position: center;border-radius: 50px;background-image: url(../../assets/img/shijue.jpg);
}.jie{width: 100%;height: 300px;display: flex;
}
.jieshao{margin-top: 1%;width: 100%;height: 600px;display: flex;flex-direction: column;
}
.partTitle{color: whitesmoke;font-size: 50px;display: flex;justify-content: center;align-items: center;width: 100%;height: 150px;
}.partTitle:hover {-webkit-animation: text-pop-up-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;animation: text-pop-up-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}@-webkit-keyframes text-pop-up-top {0% {-webkit-transform: translateY(0);transform: translateY(0);-webkit-transform-origin: 50% 50%;transform-origin: 50% 50%;text-shadow: none;}100% {-webkit-transform: translateY(-20px);transform: translateY(-20px);-webkit-transform-origin: 50% 50%;transform-origin: 50% 50%;}
}
@keyframes text-pop-up-top {0% {-webkit-transform: translateY(0);transform: translateY(0);-webkit-transform-origin: 50% 50%;transform-origin: 50% 50%;text-shadow: none;}100% {-webkit-transform: translateY(-20px);transform: translateY(-20px);-webkit-transform-origin: 50% 50%;transform-origin: 50% 50%;}
}.partContent{color: whitesmoke;font-size: 20px;align-items: center;justify-content: center;display: flex;width: 100%;
}
.part{width: 33%;height: 300px;display: flex;flex-direction: column;
}
.jianjie{display: flex;width: 100%;margin: 0 auto;display: flex;height: 250px;border-block-end: 3px whitesmoke solid;
}
.main{display: flex;flex-direction: column;width: 100%;
}
.box_center{margin: 20px;width: 100%;width: 100%;background-color: #0d6cd8;
}.content{font-size: 50px;display: flex;color: white;justify-content: center;align-items: center;width: 100%;height: 100px;
}
.title{margin-top: 200px;font-size: 80px;color: white;display: flex;justify-content: center;align-items: center;width: 100%;height: 100px;
}
.tracking-in-contract {-webkit-animation: tracking-in-contract 5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;animation: tracking-in-contract 5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
@-webkit-keyframes tracking-in-contract {0% {letter-spacing: 1em;opacity: 0;}40% {opacity: 0.6;}100% {letter-spacing: normal;opacity: 1;}
}
@keyframes tracking-in-contract {0% {letter-spacing: 1em;opacity: 0;}40% {opacity: 0.6;}100% {letter-spacing: normal;opacity: 1;}
}.top{background-position: center;flex-direction: column;width: 100%;height: 600px;display: flex;background-color: #02162e;background-image: url('../../assets/img/bg.jpg');background-size: cover;
}
.zoom {/* background-size: 125%; */-webkit-animation: zoom 10s infinite alternate ease-in-out both;animation: zoom 10s infinite alternate ease-in-out both;
}
@keyframes zoom {0% {background-size: 100%;}100% {background-size: 125%;}
}
.container{display: flex;flex-direction: column;align-items: center;width: 100%;display: flex;margin: 0 auto;
}
.color-change-5x {-webkit-animation: color-change-5x 8s linear infinite alternate both;animation: color-change-5x 8s linear infinite alternate both;
}@-webkit-keyframes color-change-5x {0% {background: #363637;}25% {background: #414142;}50% {background: #272a2d;}75% {background: #464646;}100% {background: #151515;}
}
@keyframes color-change-5x {0% {background: #02162e;}25% {background:  #26262f;}50% {background: rgb(60, 60, 65);}75% {background: #1d1d2e;}100% {background:#212d2d;}
}</style>

总结

ok,以上就是全部内容了，bye~bye


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

相关文章

C++练习题第9套

C++练习题第9套

81.在C中&#xff0c;下面哪个不是CPP文件扩展名&#xff1f; a. .cpp b. .hpp c. .cc d. .cxx 82.在C中&#xff0c;下面哪个函数不是输入/输出函数&#xff1f; a. putchar() b. scanf() c. cout<< d. getchar() 83.以下哪个关键字不是C中的关键字&#xff1f;…
阅读更多...
物联网智能硬件解析之万能空调遥控器实现 Ardunio_通过红外线发射灯遥控空调

物联网智能硬件解析之万能空调遥控器实现 Ardunio_通过红外线发射灯遥控空调

这其实就是空调万能遥控器的原理。 用arduion遥控空调。 首先我做了一下以下几点 &#xff08;1&#xff09;首先有一个红外线接收管 IR receiver &#xff08;2&#xff09;红外线发射灯 &#xff08;3&#xff09;arduino uno的板子 &#xff08;4&#xff09;几条面包线…
阅读更多...
面向对象三大特征

面向对象三大特征

面向对象三大特征 众所周知&#xff0c;面向对象有三大特征 封装继承多态 封装继承多态&#xff0c;就好像武侠小说里的“金、木、水、火、土”一样&#xff0c;相生相克 封装 封装就像是武侠里的金钟罩铁布衫&#xff0c;把对象的数据和方法封装起来&#xff0c;对外只暴露…
阅读更多...
C# 中 Console.WriteLine 常见的几种形式及其用法差异

C# 中 Console.WriteLine 常见的几种形式及其用法差异

在 C# 的 Console.WriteLine 方法中&#xff0c;有多种重载形式可以用于不同的输出需求。下面是常见的几种形式及其用法差异&#xff1a; 输出字符串&#xff1a; Copy code Console.WriteLine("Hello, World!"); 这是最简单的用法&#xff0c;直接将字符串作为参数…
阅读更多...
ROS学习记录10——.launch文件的编写与使用

ROS学习记录10——.launch文件的编写与使用

零.前言 roslacunch&#xff0c;只是方便我们一次运行大量节点&#xff0c;或者通过单个脚本运行多个节点的工具。 这部分没啥好讲的&#xff0c;主要使用为机翻调校官方文档&#xff0c;外加一些实例&#xff0c; 官方文档的地址&#xff1a;roslaunch/XML 一.元素结构 ros…
阅读更多...
Mocor

Mocor

简介 Mocor 是展讯推出的一种手机平台的代号。首次出现在2007年的“展讯技术论坛”上&#xff0c;展讯总裁武平博士正式向外界公开的一种平台战略。 图标 展讯Mocor™平台致力于无线通信、多媒体、互联网技术的融合&#xff0c;为客户提供极具竞争力的平台解决方案。 展讯Mocor…
阅读更多...
微星 MAG B660M MORTAR WIFI DDR i5-12600KF电脑 Hackintosh 黑苹果efi引导文件

微星 MAG B660M MORTAR WIFI DDR i5-12600KF电脑 Hackintosh 黑苹果efi引导文件

原文来源于黑果魏叔官网&#xff0c;转载需注明出处。 硬件型号驱动情况 主板微星 MAG B660M MORTAR WIFI DDR 处理器i5-12600KF已驱动 内存12 GB已驱动 硬盘500GB WD Blue Solid State Drive & 2TB Seagate Mobile Hard Drive (Upgraded)已驱动 显卡RX580已驱动 声卡瑞昱 …
阅读更多...
Square 开源库Flow和Mortar的介绍

Square 开源库Flow和Mortar的介绍

原文链接 : Architecting An Investigation into Flow and Mortar译者 : sundroid( chaossss 协同翻译)校对者: chaossss、Mr.Simple 状态 : 完成 “在 App 开发过程中尽可能使用 Fragment 替代 Activity”&#xff0c;Google 官方的这个建议无疑让万千 Android 开发者开始关注…
阅读更多...
最新文章

Copyright @ 2022~2023