上一篇我们介绍了字体规范,此贴介绍一下在列表中如何组合使用。下图是微信官方的要求

 

在工具中通过拖拽组件可以制作出一样的效果
拖拽一个WViewRow。这个组件是小程序的view,flex-direction=row。缺省的属性如下。
 
放在工具的画布上是这样的
 
下面我们以

 为例实际制作一个。
此单项列表中一个view包括两个view,横向排列。最外层的view有margin-top、padding-left和padding-right。
我们先定义最外层view。为了看的清楚我先把画布改成蓝色(修改方法,鼠标点击画布,修改属性面板的背景色

 )。
 
截图中设置了width=375,height=50,margin-top=20,padding-left=15,padding-right=15。在画布中箭头指向的阴影区是提供设计时的参考,方便开发时确定maring和padding的大小。
然后放入两个wviewrow。第一个view宽度85,第二个宽度是375-15-85-15=260。

然后在宽度85的view中放入一个text17pt,宽度是260的view中先放入一个image再放入一个text17pt.

此时会发现text和image都排列在view的顶端。这是因为view中flexbox缺省设置造成的,只要将两个view的align-items调整为center即可

 
然后再修改第二个view的justify-content为flex-end。让右箭头和文字在view的末尾排列。

以上是flexbox属性的操作,请参考小程序UI设计(1)-轻松布局
再修改text中文字居右。

小程序UI设计(3)-符合视觉规范-列表视觉规范的更多相关文章

  1. 小程序UI设计(4)-符合视觉规范-表单输入视觉规范

    下图是微信官方的要求 按照小程序UI设计(3)-符合视觉规范-列表视觉规范同样的方式,我们可以设计一样符合规范的输入项目.规范中没有说明padding-left的大小,我们暂定是15px.这样最外层v ...

  2. 小程序UI设计(1)-布局

    工欲善其事必先利其器.下面为大家介绍一款工具软件,如何做到轻松布局. 工具简介:小程序layout设计工具,可视化方式进行小程序UI设计.通过鼠标拖拽组件方式进行UI布局.工具提供符合微信视觉统一的模 ...

  3. 小程序UI设计(10)-巧用模板,事半功倍

    工具中为小程序员们准备了符合微信开发规范的模板.之前帖子中介绍的规范都在模板中已经设计好了,可以直接复制粘贴使用.下图中的样式是从模板直接复制过来的.实际使用时只要更换为自己的图片和文字即可.自动生成 ...

  4. 小程序UI设计(2)-符合视觉规范-字体规范

    下图是微信小程序官方要求字体规范 根据此要求小程序设计工具定制了符合规范的组件.如下图 工具使用时,将左侧组件拖拽到设计区域即可.字体大小和颜色都是按照规范设置的.在使用时根据微信要求在不同位置摆放即 ...

  5. 小程序UI设计(9)-文字排版

    小程序中一般很少大段落的文字,基本是4.5个字的主题.一行标题.一行摘要.两行描述.显示时超出部分用省略号代替.下面结合工具使用介绍一下文字排版的方法.先看效果图.  工具中属性设置如下图:两行文字属 ...

  6. 小程序UI设计之-介绍篇

    工具截图 此工具通过可视化操作进行布局,依据iphone6尺寸设置画布,可以自动生成rpx和百分比的wxss.后续还会增加js代码自动生成.工具中组件按照微信小程序开发规范进行了缺省设置,margin ...

  7. 小程序UI设计(5)-符合视觉规范-按钮视觉规范

    在设计工具中,根据规范我们定义了大中小三种按钮的尺寸大:720rpx *94rpx 圆角10px 字体18中:360rpx*70rpx 圆角8px 字体16 文字距离两边最小60小:120rpx*60 ...

  8. 小程序UI设计(7)-布局分解-左-上下结构

    FlexBox布局中的变幻方式很多,我们继续了解一个左-上下结构的布局分解  左边结构树中WViewRow下面有两个WViewColumn.WViewRow是横向排列,WViewColumn是纵向排列 ...

  9. 小程序UI设计(8)-布局分解-FlexBox的align-content应用

    FlexBox的align-content到底是什么鬼,我也搞了好半天才开发出来,目前工具中WViewRow组件使用了此属性,WViewColumn中此属性不起作用.下图是justify-conten ...

随机推荐

  1. 安德鲁1.2Ku全下125C波(CCTV4K除外)

    闲来无事.没事挑战下难度. 前面高楼挡住了,一直没有试过125, 没想到1.2的锅能全下 机器:恐龙机dinobot4K+ 天线:安德鲁1.2ku 接送结果:除4K外所有高清 图片如下

  2. Redis 几个类型常用命令

    Redis 字符串(String) 下表列出了常用的 redis 字符串命令: 序号 命令及描述1 SET key value 设置指定 key 的值2 GET key 获取指定 key 的值.3 G ...

  3. SQL优化手段

    一.建立索引 要尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引(order by desc会非常影响效率). 二.避免在建立索引的字段进行计算操作. 三.使用预编 ...

  4. C# WPF DataGrid在Grid中自适应窗体大小

    XAML 中设置   例如 <DataGrid AutoGenerateColumns="False" Margin="6" Name="dgV ...

  5. 《0day安全-软件漏洞分析技术》实验笔记2

    实验 3.4 通用shellcode 工具 Windows XP SP3 Visual C++ 6.0 OD IDA 源代码 见随书代码,参考:https://github.com/jas502n/0 ...

  6. Array js扩展方法 forEach()

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. Java拆箱装箱

    原文 http://www.cnblogs.com/dolphin0520/p/3780005.html

  8. (4.16)mysql备份还原——物理备份之XtraBackup实践

    关键词:XtraBackup实践,物理备份,xtrabackup备份,innobackupex备份 [1]如何使用? [3]系列:innobackupex --help |more [4]系列:xtr ...

  9. js中‘0’到底是 true 还是 false

    if ('0') alert("'0' is true");  if ('0' == false) alert("'0' is false");结果是,两次都 ...

  10. IDEA Git回退到指定历史版本

    1.找到要回退的版本号(右击项目--> Git --> Show History -->选中要回退的版本-->Copy Revision Number): 2.打开idea的T ...