文章列表
结一 于 5个月前发表 3048 0 0
一般来说,活动宣传页都是全屏的滑动,而移动端的视窗大小确实是有点零碎化,于是将内容在不同的手机上良好展示出现就显得有点挑战了。本文旨在通过对一个个疑难点进行攻克而形成一种通用解决方案。 活动宣传页面分析 以imweb conf的第一屏为例,如下图: imweb conf [http://7tszky.com1.z0.glb.clouddn.com/FkJN6E_oX78eQ80tFFcIFqvD9u4Z] 现在对里面的元素布局进行一个分析: * 一个全屏的背景图 * ”往届回顾“定位在左上(left, top),IMWeb.io 文字及向上箭头定位为中下(center bottom) * 发光的地球水平铺满,垂直方向定位为bottom * 中间的其他内容定位参考就是中间了 * 内容一屏显示,不论手机的宽高如何变化
5个月前
移动开发
朱灵子 于 4个月前发表 764 0 0
React Native 用IOS自带的JavaScriptCore作为JS的解析引擎,普通的JS-OC通信就是React Native在OC定义一个模块方法,JS可以直接调用这个模块方法并还可以无缝衔接回调。 具体的接口调用实现方法如下所示: * 将OC注册进来的模块取出,调用模块中的对应函数,且将参数传入 var RCTVideo = require('react-native').NativeModules.RCTVideo; RCTVideo.addVideoTitle('video title'); * 利用回调参数得到访问OC的函数,并得到其返回值 RCTVideo.RNCallbackEvent('dsb',(error,callBackEvents)=>{ if (error) { console.error(error); } else { AlertIOS.alert('返回值:'+JSON.stringify(callBackEvents)); } }); * 利用回调参数得到访问OC的函数,并得到其返回值
4个月前
移动开发
朱灵子 于 7个月前发表 1205 0 0
REACT NATIVE入门实战(一) 本文举一个简单的例子介绍如何进行react native实战开发,主要从以下几个方面来进行介绍: * 如何在mac IOS下进行react native环境配置 * 写一个简单的例子,分析react native布局与web布局的不同点 * 如何在Xcode上进行编译以及在IOS真机上运行 * 首屏加载一些简单的优化方法 react native入门实战初体验,希望能给大家一些小帮助哦~~~^_^ REACT-NATIVE MAC IOS环境配置 在mac环境下可行的react native简易安装步骤如下: * 安装Homebrew Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件。 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" * node安装 brew install node * Watchman安装
7个月前
移动开发
结一 于 7个月前发表 1379 0 0
”本系列教程为实战教程,是本人移动端重构经验及思想的一次总结,也是对 sandal [https://github.com/marvin1023/sandal] 及 sheral UI [https://github.com/imweb/sheral] 的一次全方位剖析,首发在 imweb [imweb.io] 和 w3cplus [http://w3cplus.com] 两大站点及“前端Talk”微信公众号,其余所有标注或没有标注来源的均为转载。“ ——imweb 结一 圆形进度条 具体demo效果可见: sheral progress [http://imweb.github.io/sheral/progress.html] 这里主要分析下圆环的实现,蓝色的进度条圆环由左右两边构成,这里以右半边的为例,html结构为 .circle-right > .right-inner (为了视觉效果,把蓝色放在里面了,而非覆盖在灰色上),如下图:
7个月前
移动开发
结一 于 7个月前发表 5282 0 2
SHERAL [HTTPS://GITHUB.COM/IMWEB/SHERAL] 是什么 简单来说, sheral [https://github.com/imweb/sheral] 是个UI库,目前拥有25+常用移动端组件(如btn, card, media, nav, dialog, toast等),同时允许用户非常方便扩展及定制属于自己的组件。但是sheral决不只限于UI库,它还拥有了30+ sass 的基础 mixin 或 % 的封装及其他基础能力,有了这些基础能力,不仅快捷便利,更是拥有了更多扩展可能。下面是sheral的三张UI截图: [http://7tszky.com1.z0.glb.clouddn.com/Fg0TocYTmOVFQYuPe1sZ5F-TG7VL][http://7tszky.com1.z0.glb.clouddn.com/Fkr1IoX-fIQrwTdwDLeh8JWJdVRB][http://7tszky.com1.z0.glb.clouddn.com/FknbTNLAw6iEBt1SW53uV9LPY8Am]
7个月前
移动开发
结一 于 7个月前发表 1339 0 0
”本系列教程为实战教程,是本人移动端重构经验及思想的一次总结,也是对 sandal [https://github.com/marvin1023/sandal] 及 sheral UI [https://github.com/imweb/sheral] 的一次全方位剖析,首发在 imweb [imweb.io] 和 w3cplus [http://w3cplus.com] 两大站点及“前端Talk”微信公众号,其余所有标注或没有标注来源的均为转载。“ ——imweb 结一 本篇主要从icon及图片说下移动端重构碰到的一些问题及实践方法。 ICON 对于icon的问题多数都集中在颜色和大小上,所以 sheral [https://github.com/imweb/sheral] 采用了svg icon和css绘制的icon,关于svg icon网上已经有很多文章了,所以这里主要介绍绘制icon的一些技巧,如下以搜索图标为例: // icon search.icon-search { position: relative; &::before {
7个月前
移动开发
结一 于 7个月前发表 1468 0 0
”本系列教程为实战教程,是本人移动端重构经验及思想的一次总结,也是对 sandal [https://github.com/marvin1023/sandal] 及 sheral UI [https://github.com/imweb/sheral] 的一次全方位剖析,首发在 imweb [imweb.io] 和 w3cplus [http://w3cplus.com] 两大站点及“前端Talk”微信公众号,其余所有标注或没有标注来源的均为转载。“ ——imweb 结一 FORM 大概要实现的效果如下图(具体demo可见 sheral form [http://imweb.github.io/sheral/form.html] ): form [http://7tszky.com1.z0.glb.clouddn.com/FgfXEhbLNOdsA0kENWg4a7uGT6jz] 粗略一看,跟line list差不多,好像可以直接套用,但是深究起来还是有那么些不同的,大概有以下几点用户体验差别: * 输入框可点击范围 * 右边的箭头可点击范围 line
7个月前
移动开发
结一 于 7个月前发表 1715 1 0
”本系列教程为实战教程,是本人移动端重构经验及思想的一次总结,也是对 sandal [https://github.com/marvin1023/sandal] 及 sheral UI [https://github.com/imweb/sheral] 的一次全方位剖析,首发在 imweb [imweb.io] 和 w3cplus [http://w3cplus.com] 两大站点及“前端Talk”微信公众号,其余所有标注或没有标注来源的均为转载。“ ——imweb 结一 进入离开动画 在sandal的 _animation.scss 中我们定义了fade-in/out, shrink-in/out, up-in/out, down-in/out, left-in/out, right-in/out六组基础动画,下面我们以fade-in/out为例说明如何使用: 直接调用mixin: @include animation-fade-in;@include animation-fade-out; 编译出的css为: .fade-in, .fade-out{
7个月前
移动开发
结一 于 7个月前发表 1147 0 1
”本系列教程为实战教程,是本人移动端重构经验及思想的一次总结,也是对 sandal [https://github.com/marvin1023/sandal] 及 sheral UI [https://github.com/imweb/sheral] 的一次全方位剖析,首发在 imweb [imweb.io] 和 w3cplus [http://w3cplus.com] 两大站点及“前端Talk”微信公众号,其余所有标注或没有标注来源的均为转载。“ ——imweb 结一 单行,不考虑间距等分 以sheral的 nav list [http://imweb.github.io/sheral/nav.html] 为例: .nav-list{ @include equal-flex(nav-item); } equal-flex的mixin定义在 sandal [https://github.com/marvin1023/sandal] 中,代码如下: // flex等分@mixin equal-flex($child: 'li') {display: flex;
7个月前
移动开发
结一 于 7个月前发表 1217 0 0
”本系列教程为实战教程,是本人移动端重构经验及思想的一次总结,也是对 sandal [https://github.com/marvin1023/sandal] 及 sheral UI [https://github.com/imweb/sheral] 的一次全方位剖析,首发在 imweb [imweb.io] 和 w3cplus [http://w3cplus.com] 两大站点及“前端Talk”微信公众号,其余所有标注或没有标注来源的均为转载。“ ——imweb 结一 这个line list的名字是我自己起的(大概的意思是单行列表),要实现的东西为 sheral [https://github.com/imweb/sheral] 的 line list [http://imweb.github.io/sheral/line.html] ,对应的scss组件为 _line-list.scss ,下图为line-list的一个缩影:
7个月前
移动开发
结一 于 7个月前发表 2311 2 2
”本系列教程为实战教程,是本人移动端重构经验及思想的一次总结,也是对 sandal [https://github.com/marvin1023/sandal] 及 sheral UI [https://github.com/imweb/sheral] 的一次全方位剖析,首发在 imweb [imweb.io] 和 w3cplus [http://w3cplus.com] 两大站点及“前端Talk”微信公众号,其余所有标注或没有标注来源的均为转载。“ ——imweb 结一 距离上个 移动端重构系列 [http://www.w3cplus.com/blog/tags/429.html] 已是两年了(不得不感叹时间是把杀猪刀)。这次将会带来实战系列,将欠下两年的债现在还上,给七年的重构赋予一次新生。 既然是新的开始,先简单说下这个系列要用到的一些技术吧。同时也是对移动端重构一些技术的一个简单回顾。 VIEWPORT 关于viewport详细请参考 移动前端开发之viewport的深入理解 [http://www.cnblogs.com/2050/p/3877280.html]
7个月前
移动开发
结一 于 7个月前发表 1615 1 1
”本系列教程为实战教程,是本人移动端重构经验及思想的一次总结,也是对 sandal [https://github.com/marvin1023/sandal] 及 sheral UI [https://github.com/imweb/sheral] 的一次全方位剖析,首发在 imweb [imweb.io] 和 w3cplus [http://w3cplus.com] 两大站点及“前端Talk”微信公众号,其余所有标注或没有标注来源的均为转载。“ ——imweb 结一 SANDAL是什么 简单来说, sandal [https://github.com/marvin1023/sandal] 是基于sass的一个移动端css的基础库,提供了一些基础的重置,常用的mixin,如flex布局,等分,水平垂直居中,常用图标等,基于它你可以非常方便快速地扩展出你需要的UI组件,其整体结构设计如下图: sandal [http://7tszky.com1.z0.glb.clouddn.com/Fo_FAyG7ErQn1aJNiagpV98JhYp0]
7个月前
移动开发