阅文前端团队

前言 我们在日常开发工作中，有时会遇到一些固化模板页面的需求。譬如设计稿样式和尺寸固化，在后台只需将主题通过配置项换色达到换肤效果，再配上不一样的头图，就可以将整个活动切换...

前言 相信看到此文的小伙伴们，平时工作中多多少少应该会接触过进度条方面的需求，比如直角进度条、圆角进度条、圆环进度条等，大家可能也有多种方法比如利用 CSS canvas ...

相信大家最近对:has都有所耳闻，规范提及了那么久，却迟迟没有动静，最近浏览器终于开始支持了~🎉🎉 :has伪类是一个非常强大的伪类，强大到难以置信，可以做很多梦寐以求...

一、默认换行行为 在 Web 文字排版中，默认的换行行为如下。 1. 中文（CJK文字） 所有中文的文字内容都是换行点，例如，当宽度很小的时候，文字一柱擎天显示了： 但是如...

在 web 开发中，有时不可避免会和“选区”与“光标”打交道，比如选中高亮、选中出现工具栏、手动控制光标位置等。选区就是用鼠标选中的那一部分，通常是蓝色 光标呢，是那个闪烁...

一、背景 在业务需求中，根据返回数据动态生成图片分享是很常见的场景。比如在起点读书小程序中，每本书都需要生成一个动态图片，包含：书名、作者、类别和当前页面小程序码，这几个内...

背景 2020 年末，工信部印发《互联网应用适老化及无障碍改造专项行动方案》通知，并把适老化及无障碍改造水平评测和企业信用评价纳为重点工作，在国家的大力倡导下，我们更应该要...

最近要翻新一个旧的角色关系图页面，需要优化展示角色关系，凸显人物及其关联关系。本文一步步解析下是如何实现这样的一个页面的...

内容概要 背景 vue3 项目开发 get 到的知识 让我惊讶的 vite 项目中遇到的困难 总结 项目技术栈 资料推荐 背景 有一个新项目启动，移动端项目兼容安卓 6+，...

前段时间协助完成作家的盘点活动，设计大大给的视觉稿如下图。最初拿到稿子时，以为是一个简单的常规活动，实际在完成这个活动的过程中有一点点小波折，自己也在这个过程中学习到了关于...

多行文本展开收起是一个很常见的交互， 如下图演示 实现这一类布局和交互难点主要有以下几点 位于多行文本右下角的“展开收起”按钮 “展开”和“收起”两种状态的切换 当文本不超...

在实际 Web 开发过程中，总会遇到各种各样的布局。有公司同事问我这样一种布局有没有什么好的实现方式，就是一种在活动充值页非常普遍的优惠券效果，如下 首先，碰到这类布局的最...

本文其实应该叫，Web 用户体验设计提升指南。 ... 所谓的用户体验设计，其实是一个比较虚的概念，是秉承着以用户为中心的思想的一种设计手段，以用户需求为目标而进行的设计。...

发挥你的想象，CSS也能实现拖拽效果。 这类效果用JS可以很容易实现，无非就是多了一些计算，多考虑了一些临界场景，然后代码量也多了一些。不过，经过我的一番脑洞，发现CSS也...

只要一提到组件化，我相信大多数同学，必然会想到 react, vue, angular… 这样的前端框架。 我们都知道 HTML，CSS，JS 分别对应网页中的结构，样式，...

像上面这种评星是一种很常见的需求，我原来是借助JS实现的，没有遇到多大的挑战。 后来张老师在code review我这段代码的时候，顺便提了一嘴type="range"应该...

传统的swiper太重了，里面封装了很多我们不需要的功能，而一个简单的滚动功能没必要那么重的文件。于是就想着自己如何实现，如何才能用最少的代码最优雅的实现呢？是否可以推翻传...