mobile

移动端重构实战系列7——环形UI

CSS制作圆形进度条,总是有很多同学感到蛋疼。这篇文章主要分析下圆环的实现,以及如何在圆环的基础上实现一个抽奖转盘的效果,感兴趣的同学可以点击进入阅读全文。

一个方便定制及扩展的UI组件库:sheral

继WeUI,腾讯朋友又出一款UI组件库sheral。简单来说,sheral是个UI库,目前拥有25+常用移动端组件(如btn, card, media, nav, dialog, toast等),同时允许用户非常方便扩展及定制属于自己的组件。但是sheral决不只限于UI库,它还拥有了30+ Sass 的基础mixin%的封装及其他基础能力,有了这些基础能力,不仅快捷便利,更是拥有了更多扩展可能。感兴趣的可以看看。

移动端重构实战系列6——Icon与图片

Icon图片和图片在Web中随处可见(不管是早期的PC端,还是现在的移动端),而面对各种不同的终端,Icon图片和图片又应该如何处理呢?本篇主要从Icon及图片说下移动端重构碰到的一些问题及实践方法。

移动端重构实战系列5——form元素

表单是网页中重要的元素之一,也是人机交互的重要部分之一。不管哪个轻型或重型的库都离不开表单的制作,同样在Sheral中也提供了有关于Form元素部分的内容。感兴趣的同学,请阅读全文,慢慢体会。

移动端重构实战系列4——进入离开动画

动画一直以来都是一个很有意思的课程,不管是在PC或者说移动端使用的频率越来越高。那么在这篇文章中主要向大家介绍的是有关于进入离开的动画制作细节,感兴趣的同学继续往下阅读。

移动端重构实战系列3——各种等分

前面两节介绍了移动端重构中的基础知识和列表相关的知识,在这一节中主要介绍有关于等分的知识,而且文章从不同的角度分析了等分的实现方案与各种细节。

移动端重构实战系列2——line list

这个line list的名字是我自己起的(大概的意思是单行列表),要实现的东西为sheralline list,对应的scss组件为_line-list.scss,下图为line-list的一个缩影。

移动端重构实战系列1——基础知识

距离上个移动端重构系列已是两年了(不得不感叹时间是把杀猪刀)。这次将会带来实战系列,将欠下两年的债现在还上,给七年的重构赋予一次新生。既然是新的开始,先简单说下这个系列要用到的一些技术吧。同时也是对移动端重构一些技术的一个简单回顾。

移动端重构实战系列0——sandal 和 sheral

简单来说,sandal是基于Sass的一个移动端css的基础库,提供了一些基础的重置,常用的mixin,如flex布局,等分,水平垂直居中,常用图标等,基于它你可以非常方便快速地扩展出你需要的UI组件。

【转载】Web移动端Fixed布局的解决方案

移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题。 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案。

页面

返回顶部