微信小程序|配置文本框样式、排版及点击页面跳转

问题描述

如何更改小程序页面中的文本框颜色和边框样式？

如何实现多个文本框的排版？

如何实现点击一个文本框即跳转页面？

我们在使用一个小程序时，总是会看到页面给出你不同的选择文本框，而你需要单击文本框跳转到你需要了解的内容页面中去。因此，如何美化这些文本框以及如何配置页面跳转是我们需要解决的问题。

解决方案

（1）设置文本框背景颜色。在WXSS的代码编写中增加一个background属性，如果要设置渐变色，需要一个-webkit-linear-gradient()属性，同时在括号内指出是从左向右开始渐变（left或to right）。注意：设置渐变色也有两种颜色设置方法。一是直接找到同色系的颜色来添加，二是直接更改颜色深浅比例。

（2）设置文本框样式。只需要添加一个border-radius属性，设置像素即可。

（3）配置页面跳转。首先需要一个navigator标签，然后用url链接一个页面参数。

表3.1 文本框代码

<navigator  url="/pages/A/A"><view><text>点击进入A页面</text></view></navigator>

表3.2 WXSS代码

.view1{

   border-radius:30rpx;

   width: 300rpx;

   height: 250rpx;

   margin-top: 80rpx;

   margin-left: 55rpx;

   float: left;

   background:  -webkit-linear-gradient(left,skyblue,deepskyblue,dodgerblue)

}

图3.1 效果图

图3.2 A页面

结语

配置页面跳转使用的navigator标签只能将页面跳转到非taBbar的页面，因此需要自己新建一个页面。设置背景渐变色的方法多样。

实习编辑 | 王楠岚

责 编 | 吴怡辰

where2go 团队

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