发布于 2017-11-08 12:41:50 | 128 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的精品教程,程序狗速度看过来!

微信 即时通讯软件

微信(英文名:wechat)是腾讯公司于2011年1月21日推出的一个为智能终端提供即时通讯服务的免费应用程序,微信支持跨通信运营商、跨操作系统平台通过网络快速发送免费语音短信、视频、图片和文字,同时,也可以使用通过共享流媒体内容的资料和基于位置的社交插件“摇一摇”、“漂流瓶”、“朋友圈”、”公众平台“、”语音记事本“等服务插件。


这篇文章主要介绍了微信小程序 input 组件详细介绍的相关资料,需要的朋友可以参考下


input输入框使用的频率也是比较高的。。。样式的话自己外面包裹个view自己定义。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;
}

相关文章:

hello WeApp                      icon组件
Window 
                            text组件                                switch组件
tabBar底部导航                 progress组件                        action-sheet
应用生命周期                    button组件                            modal组件
页面生命周期
                    checkbox组件                       toast组件
模块化详                           form组件详                            loading 组件
数据绑定
                           input 组件                             navigator 组件
View组件                          picker组件                             audio 组件
scroll-view组件                 radio组件                              video组件
swiper组件                        slider组件                              Image组件



最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务