问题描述

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

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

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

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

解决方案

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

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

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

(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)

}

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

图3.1 效果图

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

图3.2 A页面

结语

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


          

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