微信小程序|文本框和分页符
问题描述
如何制作一个文本框,并改变其在页面所处位置?
如何在页面中设置一个分割线?
怎样让文本和表格居于同一高度?
在配置微信小程序的页面时,大部分普通页面需要添加文本框并在其中设置文本,以及设置分割线,其中也包括设置样式所处位置。这就需要我们合理使用view标签搭配WXSS配置页面。
解决方案
(1)制作文本框及设置位置
给两个view标签设置类名,并在WXSS中设置其文本框的样式,包括设置边框大小样式,用width,height和border属性。文本框位置用margin属性。
表3.1文本框代码
.view3{ width: 500rpx; height: 100rpx; border: 3rpx solid lightgrey; float: left; margin-left: 120rpx; margin-top: 60rpx} |
---|
(2)设置分割线
分割线的设置可以用设置文本框的形式,只需在WXSS中将height设置为0。
表3.2 WXML文本框示例
<view><view></view><view>文本</view><view></view><view><text>敬请期待...</text></view></view> |
---|
表3.3 WXSS示例
.view1{ border: 1rpx solid lavender; width: 250rpx; margin-top: 80rpx; margin-left: 55rpx; float: left}.text{ float: left; margin-left: 35rpx; margin-top: 50rpx}.view2{ border: 1rpx solid lavender; width: 250rpx; margin-top: 80rpx; margin-left: 30rpx; float: left} |
---|
(3)页面设置效果图
图3.1页面设置效果图
结语
我们在制作一个表格时注意两个表格如果重叠,则需要在WXSS中设置一个float浮动元素,让两个表格在空间上不处于同一平面。同样设置分割线时,也需要让文本和线(无高度)表格处于同一水平线上,也需要用到浮动。
END
实习编辑 | 王楠岚
责 编 | 吴怡辰
where2go 团队
推荐阅读
-
介绍YUV格式:YUV444、YUV422和YUV420解析
-
了解YUV和RGB的不同之处及其对YUV444、YUV422、YUV411和YUV420的介绍
-
踞觑yuv422、yuv420和yuv444间的差异
-
微信图片存储路径:解析yuv420格式
-
互相转换的BGRA、RGBA和YUV420
-
YUV420和YUV422格式的数据采集和存储方法
-
YUV模型解析:比较YUV420P和YUV420SP
-
常用图像像素格式 NV12、NV2、I420、YV12、YUYV-常用图像像素格式 RGB 和 YUV
-
AVCodecContext和AVCodec的关系分析
-
比较YU12、I420、YV12、NV12、NV21、YUV420P、YUV420SP、YUV422P和YUV444P:理解并解析YUV420P的不同之处