微信小程序使用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
希望本文所述对大家微信小程序开发有所帮助。
相关推荐
-
微信小程序实现实时圆形进度条的方法示例
前言 最近工作中为了做一个录制按钮,研究了下小程序的实时圆形进度条实现,下面这篇文章就来给大家详细的介绍了实现的方法示例,废话不多说,先来看看效果图吧. 效果图如下 初始状态 点击中间按钮开始绘制 绘制过程 绘制结束 实现思路 建立两个canvas标签,先绘制底层的浅灰色圆圈背景,再绘制上层的红色进度条. WXML代码 <view class="wrap"> <view class="circle-box"> <canvas class
-
微信小程序实现下载进度条的方法
我们经常会在APP下载中看到下载进度条,这个进度条是为了和用户交互,告知用户当前的进度,不然让用户一直处于等待,用户等超过1分钟就会崩溃的,今天代码君就教大家如何在小程序中也制作下载进度条 progress进度条是微信小程序的组件,和HTML5的进度条progress类似. progress属性介绍 属性名 作用 参数值 percent 进度百分比0~100 show-info 在进度条右侧显示百分比 true/false 默认false active 进度条从左往右的动画 true/false
-
微信小程序 wxapp内容组件 progress详细介绍
微信小程序 内容组件 相关文章: 微信小程序 wxapp内容组件 icon 微信小程序 wxapp内容组件 text 微信小程序 wxapp内容组件progress 微信小程序内容组件 进度条:progress 进度条 属性名 类型 默认值 说明 percent Float 无 百分比0~100 showInfo Boolean false 在进度条右侧显示百分比 strokeWidth Number 6 进度条线的宽度,单位px color Color #09BB07 进度条颜色 active
-
微信小程序使用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
-
微信小程序使用image组件显示图片的方法【附源码下载】
本文实例讲述了微信小程序使用image组件显示图片的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 复制代码 代码如下: <image style="width: 300px; height: 300px; margin:10px;" mode="scaleToFill" src="{{imageSrc}}"></image> ② index.js Page({ data:{
-
微信小程序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
-
微信小程序picker组件简单用法示例【附demo源码下载】
本文实例讲述了微信小程序picker组件简单用法.分享给大家供大家参考,具体如下: picker滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器(mode=selector),时间选择器(mode=time),日期选择器(mode=date),默认是普通选择器. 具体功能说明如下: 普通选择器:mode=selector 属性名 类型 默认值 说明 range Array [] mode为selector时,range有效 value Number 0 mode为selecto
-
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
本文实例讲述了微信小程序使用slider设置数据值及switch开关组件功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <view>微信小程序组件:滑动选择器slider</view> <slider bindchange="sliderBindchange" min="{{min}}" max="{{max}}" show-value/> <view>
-
微信小程序loading组件显示载入动画用法示例【附源码下载】
本文实例讲述了微信小程序loading组件显示载入动画用法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <loading hidden="{{loadingHidden}}"> 加载中... </loading> <button type="default" bindtap="loadingTap">点击弹出loading</button> ② index
-
微信小程序(十三)progress组件详细介绍
进度条描述的是一种加载的状态,比如软件升级下载进度, 视频,图片下载进度- 主要属性: wxml <progress percent="80" show-info="true" stroke-width="5" color="red" active="true"/> 相关文章: hello WeApp icon组件 Window
-
详解微信小程序——自定义圆形进度条
微信小程序 自定义圆形进度条,具体如下: 无图无真相,先上图: 实现思路,先绘制底层的灰色圆圈背景,再绘制上层的蓝色进度条. 代码实现: JS代码: Page({ data: {}, onLoad: function (options) { // 页面初始化 options为页面跳转所带来的参数 }, onReady: function () { // 页面渲染完成 var cxt_arc = wx.createCanvasContext('canvasArc');//创建并返回绘图上下文con
随机推荐
- 非常不错的一个javascript 类
- WPF字体或内容模糊的解决方法
- 如此高效通用的分页存储过程是带有sql注入漏洞的zt
- k均值算法c++语言实现代码
- 查看apk签名信息方法
- 浅谈javascript的call()、apply()、bind()的用法
- ThinkPHP3.1新特性之对Ajax的支持更加完善
- javascript实现数组去重的多种方法
- easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
- linux jexus服务设置开机启动
- sqlserver 存储过程带事务 拼接id 返回值
- Access转换成SQL Server需要注意事项整理
- JavaScript window.location对象
- javaweb 国际化:DateFormat,NumberFormat,MessageFormat,ResourceBundle的使用
- C#实现装箱与拆箱操作简单实例
- JS检测是否可以访问公网服务器功能代码
- 让你畅游国内网络无障碍统一加速器
- 详解springboot和vue前后端分离开发跨域登陆问题
- 在 RHEL8 /CentOS8 上建立多节点 Elastic stack 集群的方法
- springboot 获取工具类bean过程详解