小程序怎么将视觉搞实现成ui

1、使用flex布局

这个真的是强烈建议,对于一个页面,首先应该大致的看一下可以划分为哪几个模块,通常的划分方式是,整体来看,是row排列,还是column排列的,那么,最擅长做这种划分的布局方式是什么,没错,就是flex布局了。

阮大大翻译的flex布局

说起来,这个并没有那么的恐怖。首先你要了解一下主轴的概念,然后,你在了解一下副轴的概念,然后在了解一下。

有了这些认识之后

你就可以看看已主轴角度来看的排版方式了

justify-content

以主轴角度来看的排版方式了,补充一点,这里如果子控件中也使用,那么,子空间自己的权重大一些,这里有点类似于android中的linerlayout

align-items

辅轴上如何对齐,比如居中,居上等等。

然后其他的属性也关注一下,关于如何分配空间的问题,比如以下这个就比较重要了

flex-grow

2、熟悉position

有没有发现使用flex没有办法搞定一个问题,那就是,布局覆盖在一个布局之上的情况。

那么,这时候,position就可以跳出来帮助你了。

position

重点注意一下,absolute,relative即可。

3、掌握一些常用的css属性。

这个是没有办法逃避的,也是只能靠积累,而且必须记,必须多练习,像margin,padding,font-szie,text-aligin这类简单的,不要指望这里会给你一一介绍,这些都太简单,如果你有过Android,或者iOS开发的经验,这些简直就是白菜,不用学,直接和那边的概念完全一致,只有掌握了这些基本的,你才能慢慢很熟练的写出你心目中所想的布局。当然熟悉这些,你发现并不大够,有时候就是整不出,怎么办,我一开始也没办法,如是只好去google问,问着问着,就学到了一些css属性了,那些对于做某样的布局起决定性作用的css属性。我这里就整理了一些,一方面算作是自己的积累,一方面,方便与和我一样的css小白吧。

  • white-space The white-space CSS property determines how whitespace inside an element is handled. 这个属性很显然很多人都不是很了解,但是掌握了这个,你写出那种页面头部很多可滑动的tab的布局就很容易了。
  • box-sizing The box-sizing CSS property defines how the user agent should calculate the total width and height of an element. 很明显,这个属性很多人也不知道吧,当你使用了border的css属性时,你很可能需要关注他,来调整整个元素的大小。
  • position The position CSS property specifies how an element is positioned in a document. The toprightbottom, and left properties determine the final location of positioned elements.

4、使用组件库

好好的利用轮子,github上已经有很多很好看的风格的VUE库,但是使用之前,一定要看看,是否兼容了小程序。

(https://github.com/opendigg/awesome-github-vue)

5、记得参考微信小程序示例

查看微信小程序文档示例

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Jackson0714

JavaScrpit判断横竖屏

2586
来自专栏HTML5学堂

【系列】移动端项目经验 表单兼容(上篇)

移动端 表单兼容(上篇) HTML5学堂:从这篇文章开始,我们将为大家总结介绍移动端的常见兼容问题,今天要提的是关于表单的一些兼容问题,本文主要包括input文...

2888
来自专栏我分享我快乐

Adobe animate cc 界面解读

我们都知道Adobe animate cc 可帮助我们不用写代码的情况下完成简单的交互动效实现,但是对于初学者而言,英文界面成为想关注它的人望而却步。首先,我强...

43915
来自专栏HTML5学堂

DIV+CSS布局和TABLE布局的优缺点

HTML5学堂:TABLE布局是早以前CSS不存在的时候兴起的,是对TABLE标签的不正规使用,Table标签就是表格,是用来显示数据的,而不是用来布局网页的,...

3429
来自专栏前端小作坊

CSS vs JS动画:谁更快?

Javascript 动画怎么可能总是和 CSS transition 一样快,甚至更快呢?到底是什么秘密呢?Adobe 和 Google 是怎么做到让他们的富...

2512
来自专栏娱乐心理测试

vue 界面在苹果手机上滑动点击事件等卡顿解决方案

用vue编写项目接近尾声,需要集成到移动端中,在webstorm上界面,运行效果都很完美,但是在苹果手机上各种问题都出现了,原生项目一向滑动流畅,事件响应迅速,...

2073
来自专栏Golang语言社区

【Go 语言社区】算法课程 第一季 第5节 回文检查

回文概念:大致就是把这个数倒过来念数字还是和原来的一样. 运行结果: 代码: package main import ( "fmt" ) //...

3254
来自专栏你不就像风一样

Comfort - 一款MarkDown风格的博客园主题

目录和返回顶部一直位于右下角,鼠标移入显示,移出隐藏。注意,在手机端是不显示目录按钮和返回顶部按钮。

2833
来自专栏阮一峰的网络日志

最佳网页宽度及其实现

以minifun.cn为例,根据Google Analytics的统计,半年多以来,访问者的屏幕分辨率一共有81种。最小的分辨率是122x160,这应该是手机;...

1123
来自专栏ytkah

Bootstrap速学教程之简要介绍

  Bootstrap是Twitter推出的一个用于前端开发的开源工具包,由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一...

2638

扫码关注云+社区