微信小程式|配置文本框樣式、排版及點擊頁面跳轉

• 2020 年 2 月 21 日
• 筆記

問題描述

如何更改小程式頁面中的文本框顏色和邊框樣式？

如何實現多個文本框的排版？

如何實現點擊一個文本框即跳轉頁面？

我們在使用一個小程式時，總是會看到頁面給出你不同的選擇文本框，而你需要單擊文本框跳轉到你需要了解的內容頁面中去。因此，如何美化這些文本框以及如何配置頁面跳轉是我們需要解決的問題。

解決方案

（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 團隊

溫馨提示：點擊頁面右下角「寫留言」發表評論，期待您的參與！期待您的轉發！