Heim  >  Artikel  >  WeChat-Applet  >  Detaillierte Einführung der WeChat-Applet-Eingabekomponente

Detaillierte Einführung der WeChat-Applet-Eingabekomponente

高洛峰
高洛峰Original
2016-12-29 09:20:202121Durchsuche

微信小程序 input 组件详细介绍

Das Eingabefeld wird auch relativ häufig genutzt. . . Um Stile zu erhalten, packen Sie eine Ansicht selbst ein und definieren Sie sie selbst. Es gibt nicht viele Eingabeattribute. Wenn Sie es langsam selbst testen müssen, versuchen Sie es mit

Hauptattribute:

微信小程序 input 组件详细介绍

wxml

<!--style的优先级比class高会覆盖和class相同属性-->
<view class="inputView" style="margin-top: 40% ">
<input class="input" type="number" placeholder="请输入账号" placeholder-style="color: red" bindinput="listenerPhoneInput" />
</view>
 
<view class="inputView">
<input class="input" password="true" placeholder="请输入密码" placeholder-style="color: red" bindinput="listenerPasswordInput"/>
</view>
 
 
<button style="margin-left: 15rpx; margin-right: 15rpx; margin-top: 50rpx; border-radius: 40rpx" type="primary" bindtap="listenerLogin">登录</button>

js

Page({
 /**
 * 初始化数据
 */
 data:{
 phone: &#39;&#39;,
 password: &#39;&#39;,
 },
 
 /**
 * 监听手机号输入
 */
 listenerPhoneInput: function(e) {
  this.data.phone = e.detail.value;
 
 },
 
 /**
 * 监听密码输入
 */
 listenerPasswordInput: function(e) {
  this.data.password = e.detail.value;
 },
 
 /**
 * 监听登录按钮
 */
 listenerLogin: function() {
  //打印收入账号和密码
 console.log(&#39;手机号为: &#39;, this.data.phone);
 console.log(&#39;密码为: &#39;, this.data.password);
 },
 
 onLoad:function(options){
 // 页面初始化 options为页面跳转所带来的参数
 },
 onReady:function(){
 // 页面渲染完成
 },
 onShow:function(){
 // 页面显示
 },
 onHide:function(){
 // 页面隐藏
 },
 onUnload:function(){
 // 页面关闭
 }
})

wxss

.input{
 padding-left: 10px;
 height: 44px;
}
 
.inputView{
 border: 2px solid red;
 border-radius: 40px;
 margin-left: 15px;
 margin-right: 15px;
 margin-top: 15px;
}


Für eine ausführlichere Einführung in WeChat-Applet-Eingabekomponenten und verwandte Artikel achten Sie bitte auf PHP-Chinesisch Webseite!


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn