微信小程序 輸入車牌號（有新能源）

<view class="page"><!-- 車牌號碼輸入框 --><view class="carNumber"><view class="weui-cells__title">請輸入車牌號碼后在使用</view><!-- 車牌號頭兩位 --><view class="carNumber-items"><view class="carNumber-items-box" bindtap='openKeyboard'><view class="carNumber-items-province carNumber-items-box-list">{{carnum[0] || ''}}</view><view class="carNumber-items-En carNumber-items-box-list">{{carnum[1] || ''}}</view></view><!-- 常規 --><view class="carNumber-item" bindtap='openKeyboard'>{{carnum[2] || ''}}</view><view class="carNumber-item" bindtap='openKeyboard'>{{carnum[3] || ''}}</view><view class="carNumber-item" bindtap='openKeyboard'>{{carnum[4] || ''}}</view><view class="carNumber-item" bindtap='openKeyboard'>{{carnum[5] || ''}}</view><view class="carNumber-item" bindtap='openKeyboard'>{{carnum[6] || ''}}</view><!-- 新能源 --><view class="carNumber-item {{showNewPower ? '': 'carNumber-item-newpower'}}"><view wx:if="{{!showNewPower}}" bindtap='showPowerBtn'><view class="carNumber-newpower-add">+</view><view>新能源</view></view><view wx:if="{{showNewPower}}" bindtap='openKeyboard'>{{carnum[7]}}</view></view></view></view><!-- 提交車牌 --><button class="carNumberBtn" bindtap='submitNumber' style="background: #333333;color:#fff;" type="default">確定</button><!-- 虛擬鍵盤 --><view class="keyboard" hidden='{{!KeyboardState}}'><view class="keyboardClose"><view class="keyboardClose_btn" bindtap='closeKeyboard'>關閉</view></view><!-- 省份簡寫鍵盤 --><view class="keyboard-item" hidden="{{carnum[0]}}"><view class="keyboard-line" wx:for="{{provinces}}" wx:key="{{index}}"><view class="keyboard-btn" wx:for="{{item}}" wx:key="{{index}}" data-val="{{itemlist}}" wx:for-item="itemlist" bindtap='bindChoose'>{{itemlist}}</view></view><view class="keyboard-del" bindtap='bindDelChoose'><text class="font_family icon-shanchu keyboard-del-font"></text></view></view><!-- 車牌號碼選擇鍵盤 --><view class="keyboard-item iscarnumber" hidden="{{!carnum[0]}}"><view class="keyboard-line" wx:for="{{numbers}}" wx:key="{{index}}"><view class="keyboard-btn" wx:for="{{item}}" wx:key="{{index}}" data-val="{{itemlist}}" wx:for-item="itemlist" bindtap='bindChoose'>{{itemlist}}</view></view><view class="keyboard-del" bindtap='bindDelChoose'><text class="font_family icon-shanchu keyboard-del-font"></text></view></view></view> </view>

?

Page({/*** 頁面的初始數據*/data: {// 省份簡寫provinces: [['京', '滬', '粵', '津', '冀', '晉', '蒙', '遼', '吉', '黑'],['蘇', '浙', '皖', '閩', '贛', '魯', '豫', '鄂', '湘'],['桂', '瓊', '渝', '川', '貴', '云', '藏'],['陜', '甘', '青', '寧', '新'],],// 車牌輸入numbers: [["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],["A", "B", "C", "D", "E", "F", "G", "H", "J", "K"],["L", "M", "N", "P", "Q", "R", "S", "T", "U", "V"],["W", "X", "Y", "Z", "港", "澳", "學"]],carnum: [],showNewPower: false,KeyboardState: true},// 選中點擊設置bindChoose(e) {if (!this.data.carnum[6] || this.data.showNewPower) {var arr = [];arr[0] = e.target.dataset.val;this.data.carnum = this.data.carnum.concat(arr)this.setData({carnum: this.data.carnum})}},bindDelChoose() {if (this.data.carnum.length != 0) {this.data.carnum.splice(this.data.carnum.length - 1, 1);this.setData({carnum: this.data.carnum})}},showPowerBtn() {this.setData({showNewPower: true,KeyboardState: true})},closeKeyboard() {this.setData({KeyboardState: false})},openKeyboard() {this.setData({KeyboardState: true})},// 提交車牌號碼submitNumber() {if (this.data.carnum[6]) {// 跳轉到tabbar頁面}},/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {},/*** 生命周期函數--監聽頁面初次渲染完成*/onReady: function () {},/*** 生命周期函數--監聽頁面顯示*/onShow: function () {},/*** 生命周期函數--監聽頁面隱藏*/onHide: function () {},/*** 生命周期函數--監聽頁面卸載*/onUnload: function () {},/*** 頁面相關事件處理函數--監聽用戶下拉動作*/onPullDownRefresh: function () {},/*** 頁面上拉觸底事件的處理函數*/onReachBottom: function () {},/*** 用戶點擊右上角分享*/onShareAppMessage: function () {} })

?

.page{background: #fff;position: absolute;top:0;bottom:0;width: 100%; } .weui-cells__title{margin-top:.77em; margin-bottom:.3em; padding-left:15px; padding-right:15px; color:#999; font-size:14px;} /* 虛擬鍵盤 */ .keyboard{height: auto;background: #d1d5d9;position: fixed;bottom:0;width: 100%;left:0; } .keyboard-item{padding:10rpx 0 5rpx 0;position: relative;display: block; } /* 關閉虛擬鍵盤 */ .keyboardClose{height: 70rpx;background-color: #f7f7f7;overflow: hidden; } .keyboardClose_btn{float: right;line-height: 70rpx;font-size: 15px;padding-right: 30rpx; } /* 虛擬鍵盤-省縮寫 *//* 虛擬鍵盤-行 */ .keyboard-line{margin:0 auto;text-align: center; } .iscarnumber .keyboard-line{text-align: left;margin-left: 5rpx; } /* 虛擬鍵盤-單個按鈕 */ .keyboard-btn{font-size: 17px;color: #333333;background: #fff;display: inline-block;padding:18rpx 0; width: 63rpx;text-align: center;box-shadow: 0 2rpx 0 0 #999999;border-radius: 10rpx;margin:5rpx 6rpx; } /* 虛擬鍵盤-刪除按鈕 */ .keyboard-del{font-size: 17px;color: #333333;background: #A7B0BC;display: inline-block;padding:4rpx 55rpx;box-shadow: 0 2rpx 0 0 #999999;border-radius: 10rpx;margin:5rpx;position: absolute;bottom:5rpx;right: 6rpx; } .keyboard-del-font{font-size:25px; }/* 車牌號碼 */ .carNumber-items{text-align: center; } .carNumber-items-box{width: 158rpx;height: 90rpx;border: 2rpx solid #CCCCCC;border-radius: 4rpx;display: inline-block;vertical-align: middle;position: relative;margin-right: 30rpx; } .carNumber-items-box-list{width: 76rpx;height: 70rpx;line-height: 70rpx;text-align: center;display: inline-block;font-size: 18px;margin:10rpx 0;vertical-align: middle; } .carNumber-items-province{border-right: 1rpx solid #ccc; } .carNumber-items-box::after{content: "";width: 6rpx;height: 6rpx;position: absolute;right: -22rpx;top: 40rpx;border-radius: 50%;background-color: #ccc; } .carNumber-item{width: 76rpx;height: 90rpx;font-size: 18px;text-align: center;border: 2rpx solid #CCCCCC;border-radius: 4rpx;line-height: 90rpx;display: inline-block;margin:0 4rpx;vertical-align: middle; } /* 新能源 */ .carNumber-item-newpower{border: 2rpx dashed #A8BFF3;background-color: #F6F9FF;color: #A8BFF3;font-size: 12px;line-height: 45rpx; } .carNumber-newpower-add{font-size: 18px; }/* 確認按鈕 */ .carNumberBtn{border-radius: 4rpx;margin:80rpx 40rpx; }

?

總結

以上是生活随笔為你收集整理的微信小程序 输入车牌号（有新能源）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。