微信小程序|文本框和页面分割线

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

问题描述

如何制作一个文本框，并改变其在页面所处位置？

如何在页面中设置一个分割线？

怎样让文本和表格居于同一高度？

在配置微信小程序的页面时，大部分普通页面需要添加文本框并在其中设置文本，以及设置分割线，其中也包括设置样式所处位置。这就需要我们合理使用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文本框示例

文本 敬请期待...

表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 团队

---

   

微信号：算法与编程之美          

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！