下圖是微信官方的要求
按照小程序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就可以了。
這樣一個符合規范的輸入項就基本完成了。
如果想自己調整留白、字體大小可以通過屬性面板進行調整。

