Introduction détaillée du composant d'entrée de l'applet WeChat-Développement WeChat-php.cn

Maison

Applet WeChat

Développement WeChat

Introduction détaillée du composant d'entrée de l'applet WeChat

高洛峰

Dec 29, 2016 am 09:20 AM

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

La zone de saisie de saisie est également utilisée relativement fréquemment. . . Pour les styles, enveloppez vous-même une vue et définissez-la vous-même. Il n'y a pas beaucoup d'attributs d'entrée. Si vous devez le tester vous-même lentement, essayez

Attributs principaux :

微信小程序 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>

Copier après la connexion

<🎜. >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(){
 // 页面关闭
 }
})

Copier après la connexion

wxss

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

Copier après la connexion

Pour une introduction plus détaillée des composants d'entrée de l'applet WeChat et des articles connexes, veuillez prêter attention au chinois PHP site web!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn