文档章节

微信小程序把玩(十七)input组件

Mr韦淋
 Mr韦淋
发布于 2017/05/07 20:22
字数 269
阅读 0
收藏 0

这里写图片描述

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; }

本文转载自:http://blog.csdn.net/u014360817/article/details/52667720

共有 人打赏支持
Mr韦淋
粉丝 2
博文 80
码字总数 23114
作品 0
江门
高级程序员
私信 提问
前端资源系列(3)-微信小程序开发资源汇总

微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件 文档 从搭建一个微信小程序开始 小程序开发文档 小程序设计指南 工具 小程序开发者工具 - 官方 Egret Wing 3.2.x 支持微信...

xzavier
08/27
0
0
微信小程序插件 - 开发教程

昨天(2018.3.13),微信小程序发布了重大功能更新,支持插件的使用和开发,个人预计,不超过2个月,优质服务的插件将会如雨后春笋般涌现。 这篇文章,我将会带大家,从0开始,学习如何开发和...

理工男海哥
03/14
554
0
微信小程序开发框架从入门到放弃

用框架是不可能用框架的,这辈子都不可能用框架。 微信小程序上手成本低,开发成本低,流量红利,推广成本低等等,很多公司的创业项目都会首选小程序来试水,小程序开发太火爆了,苦逼了前端工...

Runner羊
07/24
0
0
微信小程序selectComponent获取自定义子组件

一、微信小程序中父组件获取子组件对象方法 1.selectComponent,返回选择器的第一个组件 2.selectAllComponents,返回选择器的组件列表 参数为选择器。 使用示例:...

tianma3798
10/16
0
0
迅速上手:使用taro构建微信小程序基础教程

前言 由于微信小程序在开发上不能安装npm依赖,和开发流程上也饱受诟病;Taro 是由京东·凹凸实验室(aotu.io)倾力打造的 多端开发解决方案,它的api基于react,在本篇文章中主要介绍了使用t...

mytac
07/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Dubbo下一站:Apache顶级项目

摘要: 导读: 近日,在Apache Dubbo开发者沙龙杭州站的活动中,阿里巴巴中间件技术专家曹胜利(展图)向开发者们分享了Dubbo2.7版本的规划。 本文将为你探秘 Dubbo 2.7背后的思考和实现方式。...

阿里云云栖社区
14分钟前
1
0
Vim中快捷键命令介绍

map命令简介 map是一个映射命令,将常用的很长的命令映射到一个新的功能键上。map是Vim强大的一个重要原因,可以自定义各种快捷键,用起来自然得心应手。Vim中有五种映射存在: 用于普通模式:...

陶小陶
18分钟前
2
0
结合实际场景谈一谈微服务配置

作为 Nacos 5W1H 的系列文章,本文将围绕“Where”,讲述 Nacos 配置管理的三个典型的应用场景: 数据库连接信息 限流阈值和降级开关 流量的动态调度 上一篇:Nacos帮我解决了什么问题? 数据...

阿里云官方博客
20分钟前
1
0
Docker | 采用镜像alpine缺少时区解决方法

加入: RUN apk --update add tzdata当然也可以安装其他的如 procps, php 等

云迹
20分钟前
2
0
在Python中调用Java扩展包HanLP测试记录

最近在研究中文分词及自然语言相关的内容,关注到JAVA环境下的HanLP,HanLP是一个致力于向生产环境普及NLP技术的开源Java工具包,支持中文分词(N-最短路分词、CRF分词、索引分词、用户自定义...

左手的倒影
31分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部