微信小程序使用input组件实现密码框功能【附源码下载】
本文实例讲述了微信小程序使用input组件实现密码框功能。分享给大家供大家参考,具体如下:
1、效果展示
2、关键代码
index.wxml
<view style="width:80%; display:flex;"> <view>用户名:</view> <input style="border: 1px solid;border-color: lightblue;width:60%;" placeholder="请输入您的用户名" maxlength="16" type="text" focus="false"/> </view> <view style="width:80%; display:flex;"> 密 码:<input style="border: 1px solid;border-color: lightblue;width:60%;" placeholder="请输入您的密码" password="true" maxlength="16" type="text" focus="false"/> </view>
3、源代码点击此处本站下载。
关于input组件的详细说明可查看官网:https://mp.weixin.qq.com/debug/wxadoc/dev/component/input.html
希望本文所述对大家微信小程序开发有所帮助。
相关推荐
-
微信小程序 wxapp内容组件 progress详细介绍
微信小程序 内容组件 相关文章: 微信小程序 wxapp内容组件 icon 微信小程序 wxapp内容组件 text 微信小程序 wxapp内容组件progress 微信小程序内容组件 进度条:progress 进度条 属性名 类型 默认值 说明 percent Float 无 百分比0~100 showInfo Boolean false 在进度条右侧显示百分比 strokeWidth Number 6 进度条线的宽度,单位px color Color #09BB07 进度条颜色 active
-
微信小程序使用image组件显示图片的方法【附源码下载】
本文实例讲述了微信小程序使用image组件显示图片的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 复制代码 代码如下: <image style="width: 300px; height: 300px; margin:10px;" mode="scaleToFill" src="{{imageSrc}}"></image> ② index.js Page({ data:{
-
微信小程序picker组件简单用法示例【附demo源码下载】
本文实例讲述了微信小程序picker组件简单用法.分享给大家供大家参考,具体如下: picker滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器(mode=selector),时间选择器(mode=time),日期选择器(mode=date),默认是普通选择器. 具体功能说明如下: 普通选择器:mode=selector 属性名 类型 默认值 说明 range Array [] mode为selector时,range有效 value Number 0 mode为selecto
-
微信小程序(十三)progress组件详细介绍
进度条描述的是一种加载的状态,比如软件升级下载进度, 视频,图片下载进度- 主要属性: wxml <progress percent="80" show-info="true" stroke-width="5" color="red" active="true"/> 相关文章: hello WeApp icon组件 Window
-
微信小程序实现实时圆形进度条的方法示例
前言 最近工作中为了做一个录制按钮,研究了下小程序的实时圆形进度条实现,下面这篇文章就来给大家详细的介绍了实现的方法示例,废话不多说,先来看看效果图吧. 效果图如下 初始状态 点击中间按钮开始绘制 绘制过程 绘制结束 实现思路 建立两个canvas标签,先绘制底层的浅灰色圆圈背景,再绘制上层的红色进度条. WXML代码 <view class="wrap"> <view class="circle-box"> <canvas class
-
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
本文实例讲述了微信小程序使用slider设置数据值及switch开关组件功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <view>微信小程序组件:滑动选择器slider</view> <slider bindchange="sliderBindchange" min="{{min}}" max="{{max}}" show-value/> <view>
-
微信小程序实现下载进度条的方法
我们经常会在APP下载中看到下载进度条,这个进度条是为了和用户交互,告知用户当前的进度,不然让用户一直处于等待,用户等超过1分钟就会崩溃的,今天代码君就教大家如何在小程序中也制作下载进度条 progress进度条是微信小程序的组件,和HTML5的进度条progress类似. progress属性介绍 属性名 作用 参数值 percent 进度百分比0~100 show-info 在进度条右侧显示百分比 true/false 默认false active 进度条从左往右的动画 true/false
-
微信小程序使用progress组件实现显示进度功能【附源码下载】
本文实例讲述了微信小程序使用progress组件实现显示进度功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml 复制代码 代码如下: <progress percent="100" color="blue" stroke-width="20" show-info active/> progress组件属性说明如下: 感兴趣的朋友可以逐一尝试上述属性设置的具体用法. 3.源代码点击此处本站下载. 关
-
微信小程序 progress组件详解及实例代码
主要属性: 效果图: ml: <View > <!--百分比是30,并在进度条右侧显示百分比--> <Text class="text-style">百分比是30,并在进度条右侧显示百分比</Text> <progress percent="30" show-info /> <!--百分比是40,进度条线的宽度12px--> <Text class="text-style&quo
-
微信小程序loading组件显示载入动画用法示例【附源码下载】
本文实例讲述了微信小程序loading组件显示载入动画用法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <loading hidden="{{loadingHidden}}"> 加载中... </loading> <button type="default" bindtap="loadingTap">点击弹出loading</button> ② index
-
详解微信小程序——自定义圆形进度条
微信小程序 自定义圆形进度条,具体如下: 无图无真相,先上图: 实现思路,先绘制底层的灰色圆圈背景,再绘制上层的蓝色进度条. 代码实现: JS代码: Page({ data: {}, onLoad: function (options) { // 页面初始化 options为页面跳转所带来的参数 }, onReady: function () { // 页面渲染完成 var cxt_arc = wx.createCanvasContext('canvasArc');//创建并返回绘图上下文con
-
微信小程序swiper组件用法实例分析【附源码下载】
本文实例讲述了微信小程序swiper组件用法.分享给大家供大家参考,具体如下: 关于视图容器swiper的详细内容可参考官方文档 先来看看运行效果: index.js: Page({ data: { imgUrls: ['http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jp
随机推荐
- java操作mongoDB查询的实例详解
- awk中NR和FNR的区别小结和实例演示
- PHP文件读取功能的应用实例
- js简易版购物车功能
- php程序的国际化实现方法(利用gettext)
- Shell脚本中不同进制数据转换的例子(二进制、八进制、十六进制、base64)
- JavaScript高级程序设计(第3版)学习笔记10 再访js对象
- Java注解详细介绍
- awk命令、awk编程语言详细介绍和实例
- sqlserver2008 拆分字符串
- insert into tbl() select * from tb2中加入多个条件
- jQuery的each终止或跳过示例代码
- Script的加载方法小结
- 如何删掉“删不掉”的文件
- C#获取每个年,月,周的起始日期和结束日期的方法
- 在Apache服务器上安装SSL支持的教程
- Java 多用户登录限制的实现方法
- 比较方便的onMouseWheel缩放图片效果 原创
- Python实现mysql数据库更新表数据接口的功能
- Python基于列表模拟堆栈和队列功能示例