微信小程序常六位付款密码组件与模板写法

最新推荐文章于 2022-04-22 14:20:01 发布

好想再胖十斤

最新推荐文章于 2022-04-22 14:20:01 发布

阅读量5.5k

点赞数

分类专栏：微信小程序文章标签：微信小程序六位密码组件封装小程序组件

本文链接：https://blog.csdn.net/qq_33719683/article/details/79617291

版权

本文介绍了如何在微信小程序中创建一个六位密码输入组件，包括HTML、CSS和JS代码实现。同时提供了模板写法的示例，适用于1.6.3以上版本的小程序，对于低版本则需考虑兼容性问题。

摘要由CSDN通过智能技术生成

先看看效果

Html代码

<view class="payPass_box1" wx:if="{
  {allinputF1}}">
	<view class="qiueBtn" bindtap="hideBox">关闭</view>
	<view class="payPass_box_t">请输入您的支付密码</view>
	<view class="payPass_box_m">
		<view class="payPass_box_m_in" bindtap="focusInput">
			<view class="payPass_box_m_in_in" wx:for="{
  {6}}" wx:key="{
  {index}}">
				<input data-index="{
  {index}}" bindinput="allInputBtn" type="number" confirm-hold="true" value="{
  {inputArr[index]}}" disabled="true" maxlength="1" password="{
  {true}}"/>
			</view>
		</view>
		<view class="indexTopInput">
			<input value="{
  {inputStr}}" focus="{
  {allinputF1}}" maxlength="6" type="number" bindinput="passInput"/>
		</view>
	</view>
</view>

Css代码

.payPass_box1{
	font-size: 26rpx;
	color: #333;
	width: 640rpx;
	text-align: center;
	margin-top: 40rpx;
	height:400rpx;
	position: fixed;
	left: 50%;
	top: 30%;
	transform: translate(-50%,-50%);
	border: 2rpx #d1d1d1 solid;
	background: #f