微信小程序输入框样式（小程序输入框高度设置）

本篇文章给大家谈谈微信小程序输入框样式，以及小程序输入框高度设置对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

本文目录一览：

• 1、微信小程序6位支付密码输入框
• 2、微信小程序input输入类型
• 3、小程序 view 如何写出 input 的效果
• 4、微信小程序显示打字的叫什么
• 5、微信小程序自定义组件-可清除的input组件

微信小程序6位支付密码输入框

微信小程序6位支付密码输入框

产品需求

微信小程序支付密码6位输入框

实现效果

非明文6位输入框，模拟光标，输入自动移到下一位，满6位自动设置

实现原理

1.放置一个输入框，隐藏其文字和位置，同时设置支付输入框（表格）样式

2.当点击输入框时设置表格为聚焦状态，唤起键盘，点击空白处，失去焦点，设为失去焦点样式

3.限制输入框最大字数为6并且监听输入框状态，以输入框值的长度作为圆点和光标展示的渲染条件

4.当输入框的值等于6时，设置组件的事件传递到引用的页面，页面自定义事件（发起支付请求等...）

其他说明

6位支付密码是一个很常见的需求。

在H5端用vue做过组件，app端也要求实现，小程序类似的组件在网页上检索到的并不多，仅此记录。

Github地址：

微信小程序input输入类型

meta charset="utf-8"

文本输入框

数字输入框

身份证类型的输入框

带小数点的数字输入框

小程序 view 如何写出 input 的效果

今天主要详写一下微信小程序中的Input输入框控件，输入框在程序中是最常见的，登录，注册，获取搜索框中的内容等等都需要，同时，还需要设置不同样式的输入框，今天的代码中都要相应的使用。今天给大家系统的介绍一下微信小程序定制过程中用到的Input输入框控件。输入框在程序开发中是经常用到的，比较常见的地方，如：登录、注册、搜索等。另外输入框在不同的场景下，也会有不同的样式。这里给大家示范一下各种场景下的实例效果和代码。以便需要的时候直接采用。官方文档中，对于input输入框的相关属性：

=

微信小程序显示打字的叫什么

微信小程序自带的API中的页面交互功能，虽然提示功能非常全面，但是所有的交互API中是没有可以自己在提示框中输入文本的功能，那么现在我们来自己做这样的一个提示框（可以带有输入功能），在提示框输入完内容之后，点击确定，可以将文本内容返回，点击取消则可以回到之前的状态。

（在这里，主页面的布局可以根据每个人的想法来布局，这里展示的css之后展示提示框部分的）

1、首先打开微信开发者工具，建立一个代码模板，那么我们这个提示框就是写在这个页面上。

    这里我们主页面叫做index

2、在基本页面中写上一个姓名的文本，当前姓名用text{{stuName}}/text表示，然后为一个button按钮，再在js文件中，建立相应的点击事件以及stuName的信息。这样，一个原始页面就写好了。

下面我们开始弹出框页面的制作

view class='toast-box' hidden='{{!ifName}}'

view class='toastbg'/view

view class='showToast'

view class='toast-title'

text修改姓名/text

/view

view class='toast-main'

view class='toast-input'

input placeholder='请输入姓名' bindinput='setValue' data-name='stuEidtName'/input

/view

/view

view class='toast-button'

view class='button1'

button catchtap='cancel'取消/button

/view

view class='button2'

button catchtap='confirm'确定/button

/view

/view

/view

/view

3、我们可以发现，点击按钮后弹出输入框，如果点击除取消和确定之外的地方，是不会有反应的。为了做到这个功能，我们用一个绝对位置的渲染层（toastbg），覆盖住整个页面，并且如果你的页面长度没有滚动的话，请输入min—height：100vh，如果页面发生滚动，请把长度控制在height：100%即可看到整个页面都被覆盖。并且这个覆盖的页面要表现为透明，opacity：0.2，即可

4、bindinput为写文本时所触发的事件，data-name为文本数据所保存的地方，在js中我们可以把这个数据打印出来，会发现我们所输入的文本信息。

以下为css的代码

.toast-box {

width: 100%;

height: 100%;

opacity: 1;

position: fixed;

top: 0px;

left: 0px;

}

.toastbg {

opacity: 0.2;

background-color: black;

position: absolute;

width: 100%;

min-height: 100vh;

}

.showToast {

position: absolute;

opacity: 1;

width: 70%;

margin-left: 15%;

margin-top: 40%;

}

.toast-title {

padding-left: 5%;

background-color: #2196f3;

color: white;

padding-top: 2vh;

padding-bottom: 2vh;

border-top-right-radius: 16rpx;

border-top-left-radius: 16rpx;

}

.toast-main {

padding-top: 2vh;

padding-bottom: 2vh;

background-color: white;

text-align: center;

}

.toast-input {

margin-left: 5%;

margin-right: 5%;

border: 1px solid #ddd;

padding-left: 2vh;

padding-right: 2vh;

padding-top: 1vh;

padding-bottom: 1vh;

}

.toast-button {

display: flex;

}

.button1 {

width: 50%;

}

.button2 {

width: 50%;

}

.button1 button {

width: 100%;

background-color: white;

color: red;

border-radius: 0px;

border-bottom-left-radius: 16rpx;

}

.button2 button{

width: 100%;

background-color: white;

color: black;

border-radius: 0px;

border-bottom-right-radius: 16rpx;

}

.picker {

padding-top: 1vh;

padding-bottom: 1vh;

}

我们可以根据自己的喜欢，对提示框的样式进行改变

5、编写js代码，我们需要实现以下一些基本功能（点击出现弹窗，取消不改变数据值，确定进行判断数据值，若为空则不能改变，否则可以改变，并且主页面上的内容要变为相应改变后的内容）

6、给最外层的弹窗附上hidden（如图所示），为这个值初始为false，点击按钮后触发事件，改false为true，这样即可点击出现弹窗。

7、为取消按钮附上点击事件，与hidden的部分刚好相反即可。

8、为书写文本绑定事件，上述代码中命名为setValue，这个函数我们传入一个event进去，将其打印，我们可以发现在其的detail中有我们刚刚所书写的内容，我们将这个值，传给js中data一个属性，这里我们命名为edit。

9、为确定绑定事件，用this.data.edit将这个值进行判断，若为空，我们用wx.showToast提示用户信息没有填写完整，并且页面不会改变。若不为空，则我们setData一下我们的stuName为这个edit的值，并且重新把hidden的属性值改为false。

10、返回到初始页面我们就可以看到我们自己做得一个提示框，并且具有修改值的功能

微信小程序自定义组件-可清除的input组件

最近正在做的一个小程序项目中需要用到一个可清除的输入框控件，为了在项目中使用方便以及方便其他项目直接使用，便封装了一个可清除的input自定义组件。

组件需要达到的需求是：输入框内没有内容时，删除按钮隐藏；当输入框内有内容时，删除按钮显示，点击删除按钮则清空输入框内所有内容。并且还可以设置输入框整体样式以及输入框左侧图标。

明确了需求之后，就可以开始着手实现了。

首先，在目标目录下新建一个自定义组件

建好之后，我们需要来设计布局。根据需求来看，我们只需要三个组件：两个image和一个input。左边一个image提示图标，然后一个input输入框，最后一个image删除按钮。我们要把尽可能多的数据设置成可以修改的绑定数据，提高自定义组件的可扩展性。

最终确定的wxml布局文件如下：

然后，我们就要来设置组件的一些属性和监听方法了。小程序的组件属性列表是定义在.js文件的properties里的。把需要暴露出去并可以修改的属性都写在这里面。其语法示例如下：

我的属性列表如下：

完成了属性列表的编写之后，接下来我们需要为自定义组件添加监听事件。

事件系统是组件间通信的主要方式之一。自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件。

监听以及触发事件的语法是这样的：

这里我们需要设置的触发事件有，输入框的输入事件以及输入框的确认事件。通过 triggerEvent 方法指定事件名以及事件触发事件参数

以上就已经完成了这个可清除input组件的自定义开发了。现在来看怎么使用这个组件。

首先在需要使用此组件的页面.json文件中设置usingComponents属性来引入这个自定义组件

然后，我们就可以在页面中引用这个自定义组件了，引用的方式非常简单，通过我们在上一步设置的标签名称就可以引用了。

最终实现的效果图如下：

项目GitHub地址：

微信小程序酒店类模板

微信小程序捐款类模板

关于微信小程序输入框样式和小程序输入框高度设置的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。