unocss + vite + varlet 搭建移动端

简介: 第二个特点是实现移动端物理键的控制,换句话说是这里实现了监听物理按钮的返回来做一点你想要的事情。

unocss 是什么,不清楚的可以看这边 重新构想原子化 CSS,


整体的架构


1.vue3 + setup + ts, vw + rem等来搭建的移动端项目

2.tslint, prettier来控制代码的格式

3.simple-git-hook来控制代码提交的规范

4.deploy.sh 来实现自动部署

5.unocss 及其生态来实现css和icon图标的按需加载,不需要使用js就能引入图标

6.记录滚动条位置,监听物理键返回,路由动画等都是hooks的形式存在


项目效果图


代码地址https://github.com/cll123456/template-varlet-v3-ts

演示环境: https://cll123456.github.io/template-varlet-v3-ts

在断断续续的几天中,把项目实现了,做的效果还是让自己满意的。从开发体验来说是真的香,一直从js, css, icon图标等都遵从按需加载的原理。


外围效果


f3e3fbf948c22405c2b9eef91a2abedf.gif


标配的移动端项目,移动端的适配也是做好了,vm + rem的形式来的。上中下的布局,黑暗模式等


第一个页面


24ea4ff185a73d5f11e0b55e73a22705.gif


进入时候的动画是渐变,进入详情是右边切入动画,离开详情是左边切入的动画,看起来还挺好看的。🎈🎈🎈


第二个页面


第二个特点是实现移动端物理键的控制,换句话说是这里实现了监听物理按钮的返回来做一点你想要的事情。


第三个页面


由于varlet提供了无限滚动的组件,如果无限滚动的数据太多,那么dom数量达到一定的量级就会卡顿,所以我在此基础上加上了虚拟dom的形式来节约性能。注意看,每一个列表的高度可是不固定的哦!


第五个页面


4391ff754df71f2c96be9d14299445e5.gif


在移动端上面,经常会有需要返回到滚动条指定的位置,也就是说记录滚动条的位置,这里也是实现了哦


🎈🎈彩蛋


想要这一系列文章吗?那就请督促我更新吧!😄😄😄让我看到大家的热情,请评论转发告诉我,最后能不能给个小星星呢😁

相关文章
|
开发框架 移动开发 前端开发
Uni-App常用事件
Uni-App常用事件
508 2
|
文字识别 Java C++
Tesseract-OCR的简单使用与训练
Tesseract,一款由HP实验室开发由Google维护的开源OCR(Optical Character Recognition , 光学字符识别)引擎,与Microsoft Office Document Imaging(MODI)相比,我们可以不断的训练的库,使图像转换文本的能力不断增强;如果团队深度需要,还可以以它为模板,开发出符合自身需求的OCR引擎。
6297 0
|
8月前
|
SQL 数据可视化 BI
VeryReport和FineReport两款报表软件深度分析对比
VeryReport和FineReport两款报表软件深度分析对比
|
8月前
|
Kubernetes 监控 Serverless
基于阿里云Serverless Kubernetes(ASK)的无服务器架构设计与实践
无服务器架构(Serverless Architecture)在云原生技术中备受关注,开发者只需专注于业务逻辑,无需管理服务器。阿里云Serverless Kubernetes(ASK)是基于Kubernetes的托管服务,提供极致弹性和按需付费能力。本文深入探讨如何使用ASK设计和实现无服务器架构,涵盖事件驱动、自动扩展、无状态设计、监控与日志及成本优化等方面,并通过图片处理服务案例展示具体实践,帮助构建高效可靠的无服务器应用。
|
安全 JavaScript API
文件上传漏洞——绕过
绕过客户端检测(JS检测) 绕过服务端检测(MIME类型检测、文件后缀检测、文件内容检测)
286 1
|
存储 移动开发 JavaScript
【Uniapp 专栏】Uniapp 数据绑定原理的详细解读
【5月更文挑战第12天】Uniapp的数据绑定基于Vue.js,核心是数据驱动视图的双向绑定,简化开发。关键要素包括数据模型(存储应用数据)和模板(定义界面结构,引用绑定数据)。通过观察者模式监听数据变化,优化更新以提高性能。语法如`{{}}`数据插值,`v-bind`属性绑定,`v-on`事件处理。注意数据管理、性能优化和数据安全。理解这一原理能提升应用体验和性能,随着技术发展,数据绑定将带来更多可能性。
355 2
【Uniapp 专栏】Uniapp 数据绑定原理的详细解读
|
存储 Kubernetes 安全
在K8S中,etcdctl如何使用?
在K8S中,etcdctl如何使用?
|
搜索推荐 大数据
大数据在社交媒体领域的应用有哪些?请举例说明。
大数据在社交媒体领域的应用有哪些?请举例说明。
354 0