Heim >WeChat-Applet >Mini-Programmentwicklung >WeChat Mini-Programm (17) Detaillierte Einführung der Eingabekomponente

WeChat Mini-Programm (17) Detaillierte Einführung der Eingabekomponente

高洛峰
高洛峰Original
2017-01-09 10:57:341662Durchsuche

微信小程序 (十七)input 组件详细介绍

Auch die Nutzungshäufigkeit des Eingabefeldes ist relativ hoch. . . Um Stile zu erhalten, packen Sie eine Ansicht selbst ein und definieren Sie sie selbst. Es gibt nicht viele Eingabeattribute. Wenn Sie es selbst langsam testen müssen, probieren Sie es aus.

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: '',
 password: '',
 },
 
 /**
 * 监听手机号输入
 */
 listenerPhoneInput: function(e) {
  this.data.phone = e.detail.value;
 
 },
 
 /**
 * 监听密码输入
 */
 listenerPasswordInput: function(e) {
  this.data.password = e.detail.value;
 },
 
 /**
 * 监听登录按钮
 */
 listenerLogin: function() {
  //打印收入账号和密码
 console.log('手机号为: ', this.data.phone);
 console.log('密码为: ', 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;
}

Weitere detaillierte Einführungen in die Eingabekomponenten des WeChat-Miniprogramms (17) finden Sie auf der chinesischen PHP-Website für verwandte Artikel!


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