微信小程序自定义车牌号弹出式输入键盘效果-案例-附小程序演示代码链接

演示图 - 几种车牌输入键盘下载

源码

wxml文件

<!--pages/test3/test3.wxml-->
<text bindtap="showCarNo" data-statu="open">弹出车牌输入键盘</text>
<view>{
  {carId}}</view>

<!--mask-->
<view class="drawer_screen" bindtap="showCarNo" data-statu="close" wx:if="{
  {showModalStatus}}"></view>
<!--content-->
<!--使用animation属性指定需要执行的动画-->
<view animation="{
  {animationData}}" class="drawer_attr_box" wx:if="{
  {showModalStatus}}">
  <!--drawer content-->
  <view class="drawer_content">
    <view class="drawer-title">
      <!-- <image src="/images/close.png" bindtap="close"></image> -->
      <view class="drawer-title-txt" style="float:left; margin-left:30rpx; font-size: 30rpx;" bindtap="carNoCancel">
        取消</view>
      <view class="drawer-title-txt" style="float:right; margin-right:30rpx; font-size: 30rpx;" bindtap="carNoConfirm">
        确定</view>
    </view>
    <!-- <view class="drawer-title-txt" style="float:left; margin-left:30rpx; font-size: 28rpx;">请输入您的车牌</view> -->
    <view class=" txtcph plate">
      <!-- <text style="width:190rpx;">车牌号码：</text> -->

      <view class="yardName Pattern" style="padding: 14rpx;color:#426DFF;display:flex;justify-content: space-between;">
        <text style="color:#404040">请输入您的车牌号</text>
        <view class="patcp">
          <text bindtap="theChangeplate" data-flag="1"
            class="{
  {Pattern == '切换为新能源' ? 'bgcolLeft' : 'bgLeft'}}">普通车牌</text>
          <text bindtap="theChangeplate" data-flag="2"
            class="{
  {Pattern == '切换为普通车' ? 'bgcolRight' : 'bgRight'}}">新能源车</text>
        </view>
      </view>
      <!-- <view class="yardName Pattern" bindtap="theChangeplate" style="padding: 14rpx;color:#426DFF;display:flex;flex-direction: row-reverse;">
        {
  {Pattern}}
      </view> -->
      <div class="key">
        <view class="plate-input-body">
          <view class="plate-input-content" wx:if="{
  {flag}}">
            <view class="{
  {inputOnFocusIndex=='0'?'plate-nums-foc':'plate-nums-first'}}">
              <text bindtap="inputClick" class="plate-num-text" data-id="0">{
  {inputPlates.index0}}</text>
            </view>
            <view class="{
  {inputOnFocusIndex=='1'?'plate-nums-foc':'plate-nums-first'}}">
              <text bindtap="inputClick" class="plate-num-text" data-id="1">{
  {inputPlates.index1}}</text>
            </view>
            <view class="{
  {inputOnFocusIndex=='2'?'plate-nums-foc':'plate-nums-first'}}">
              <text bindtap="inputClick" class="plate-num-text" data-id="2">{
  {inputPlates.index2}}</text>
            </view>
            <view class="{
  {inputOnFocusIndex=='3'?'plate-nums-foc':'plate-nums-first'}}">
              <text bindtap="inputClick" class="plate-num-text" data-id="3">{
  {inputPlates.index3}}</text>
            </view>
            <view class="{
  {inputOnFocusIndex=='4'?'plate-nums-foc':'plate-nums-first'}}">
              <text bindtap="inputClick" class="plate-num-text" data-id="4">{
  {inputPlates.index4}}</text>
            </view>
            <view class="{
  {inputOnFocusIndex=='5'?'plate-nums-foc':'plate-nums-first'}}">
              <text bindtap="inputClick" class="plate-num-text" data-id="5">{
  {inputPlates.index5}}</text>
            </view>
            <view class="{
  {inputOnFocusIndex=='6'?'plate-nums-foc':'plate-nums-first'}}">
              <text bindtap="inputClick" class="plate-num-text" data-id="6">{
  {inputPlates.index6}}</text>
            </view>
          </view>
          <view class="new-plate-input-content" wx:else="">
            <view class="{
  {inputOnFocusIndex=='0'?'plate-nums-foc':'plate-nums-first'}}">
              <text bindtap="inputClick" class="plate-num-text" data-id="0">{
  {inputPlates.index0}}</text>
            </view>
            <view class="{
  {inputOnFocusIndex=='1'?'plate-nums-foc':'plate-nums-first'}}">
              <text bindtap="inputClick" class="plate-num-text" data-id="1">{
  {inputPlates.index1}}</text>
            </view>
            <view class="{
  {inputOnFocusIndex=='2'?'plate-nums-foc':'plate-nums-first'}}">
              <text bindtap="inputClick" class="plate-num-text" data-id="2">{
  {inputPlates.index2}}</text>
            </view>
            <view class="{
  {inputOnFocusIndex=='3'?'plate-nums-foc':'plate-nums-first'}}">
              <text bindtap="inputClick" c