微信小程序|配置文本框样式、排版及点击页面跳转
作者:互联网
问题描述
如何更改小程序页面中的文本框颜色和边框样式?
如何实现多个文本框的排版?
如何实现点击一个文本框即跳转页面?
我们在使用一个小程序时,总是会看到页面给出你不同的选择文本框,而你需要单击文本框跳转到你需要了解的内容页面中去。因此,如何美化这些文本框以及如何配置页面跳转是我们需要解决的问题。
解决方案
(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 团队
标签:渐变色,微信,文本框,设置,跳转,left,页面 来源: https://blog.51cto.com/u_15281984/2958464