小程序UI设计（4）-符合视觉规范-表单输入视觉规范

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

 为例制作符合规范的布局。
首先在工具的画布上拖拽WViewRow。
 
然后设置width=375，padding-left和padding-right为15。再鼠标拖拽过来两个wviewrow，一个宽度是85，一个宽度是375-15-85-15=260。然后修改这两个view的align-items为center，使内部组件纵向居中排列。然后85的view里面拖入wtext17pt组件，260的view拖入winput17pt组件。

 
然后修改文字内容。

 。输入框的placeholder在“输入提示”中输入。
刚才忘了设置260宽度view的margin-left。规范中规定是5px。

 
由于增加了margi-left，根据flexbox布局要求会在第二行，这时修改宽度为260-5=255就可以了。

 

 

这样一个符合规范的输入项就基本完成了。
如果想自己调整留白、字体大小可以通过属性面板进行调整。

转载于:https://www.cnblogs.com/myloveblogs/p/6169556.html