微信小程序输入车牌号（有新能源）

<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;
}

微信小程序输入车牌号（有新能源）相关推荐

微信小程序模拟车牌号键盘
微信小程序模拟车牌号键盘效果图中文键盘英文数字键盘项目地址:https://github.com/ushars/keyboard
微信小程序自定义车牌号输入键盘-附源码
键盘已做过处理第一位只能是省份简称,第二位只能输入字母,第三位以后可以输入数字加字母的组合,输入完成后有正则方法校验车牌号的合法性.高效率车牌号输入键盘,大大提升用户体验,增强用户输入车牌号的真实性 ...
微信小程序实现车牌号录入
实现效果如下图所示: 废话不多说,直接上代码,如果有需要直接复制代码到项目里面,注册组件即可. <view class="modal-box"><view cla ...
微信小程序使用车牌号输入法
在做小程序时,做了一个关于车的项目,然后需要添加车辆信息.添加车牌号,使用车牌键盘输入,当时我把这个需求给砍了,然后在添加车辆信息时,老大看到数据库里我乱填的车牌号,又让我把他加上了^o^ 1.效果图 ...
微信小程序输入联想、表格
最近看到微信小程序并没有自带table,于是准备自己写一个 (难道官方使考虑到小程序中没有使用表格的场景么...感觉有可能...) 先放效果图(顺便讽刺一波先放代码再放效果,甚至不放效果图的文章(手动 ...
小程序模拟输入车牌号键盘
wxml <view class=''>车牌号</view><view class='to-flex-center-between' bindtap='licensePl ...
uniapp 车牌号输入车牌号键盘新能源车牌键盘特殊车辆车牌键盘
1:效果图 2:代码: <template><view class="container"><view class="car_type_bo ...
微信小程序输入文字用canvas生成公章并转为图片
<input type="text" placeholder="请输入公司名称" bindinput="bindInputCompany&quo ...
微信小程序输入手机号，验证码
如上图,想实现输入注册手机号,及6位数字验证码.并且输入后倒计时60秒主要分为 wxml,wxss,js 三块. 其中用到的倒计时模块,单独写成工具类使用. toast 是一个提示工具类,详见我另外 ...

微信小程序输入车牌号（有新能源）

微信小程序输入车牌号（有新能源）

微信小程序输入车牌号（有新能源）相关推荐

最新文章

热门文章

微信小程序 输入车牌号（有新能源）

微信小程序 输入车牌号（有新能源）

微信小程序 输入车牌号（有新能源）相关推荐

最新文章

热门文章

微信小程序输入车牌号（有新能源）

微信小程序输入车牌号（有新能源）

微信小程序输入车牌号（有新能源）相关推荐