微信小程序实现输入车牌号码的功能（附效果图）

实现需求：

实现用户输入车牌的功能

实现效果图：

可以输入 正常车牌以及新能源车牌

实现步骤

1 . `wxml` 文件

  <!-- 车牌号码输入框 --><view class="carNumber" style="margin-top: 50rpx;"><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:  #DE5252;color:#fff;border-radius: 40rpx;" 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> --><image class="font_family icon-shanchu keyboard-del-font" src="/images/my_car_del.png"></image></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></text> --><image class="font_family icon-shanchu keyboard-del-font" src="/images/my_car_del.png"></image></view></view></view>

2. `js` 文件

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() {var that = this;if (that.data.carnum[6]) {wx.showLoading();var number;if (!that.data.showNewPower) {if (that.data.carnum[6]) {number = that.data.carnum[0] + that.data.carnum[1] + that.data.carnum[2] + that.data.carnum[3] + that.data.carnum[4] + that.data.carnum[5] + that.data.carnum[6];that.addCarNumber(number);} else {wx.showToast({title: '请填写完整的车牌号码',icon: "none",duration: 2000})}} else {if (that.data.carnum[7]) {number = that.data.carnum[0] + that.data.carnum[1] + that.data.carnum[2] + that.data.carnum[3] + that.data.carnum[4] + that.data.carnum[5] + that.data.carnum[6] + that.data.carnum[7];that.addCarNumber(number);} else {wx.showToast({title: '请填写完整的车牌号码',icon: "none",duration: 2000})}}} else {wx.showToast({title: '请填写完整的车牌号码',icon: "none",duration: 2000})}},addCarNumber(number){console.log(number); // 车牌号码}

最后实现了输入车牌号码的功能以及新增新能源车辆的功能

微信小程序实现输入车牌号码的功能（附效果图）相关推荐

微信小程序实现输入车牌号码的功能vue版（附效果图）
1,车牌第一位时选择录入图: 2,输入车牌第二位及后面的号码选择图 3 ,换普通车牌图下面是完整代码 <template><view class="container&q ...
微信小程序聊天室前后端源码附效果图和数据库结构图
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 122 <!-- <button bindtap='close'>关闭</bu ...
[微信小程序]物流信息样式加动画效果(源代码附效果图)
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 效果图片:(信息仅为示例)  ...
[微信小程序]星级评分和展示(详细注释附效果图)
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 星级评分分成两种情况: 一:展示后台给的评分数据二:用户点击第几颗星星就显示为几星评分; < ...
[微信小程序]手指触摸动画效果(完整代码附效果图)
微信小程序开发交流qq群 173683895 本文共有两个示例,先上图示例一: 示例二: 示例一代码(微信小程序): // pages/test/test.js Page({container ...
微信小程序：地图导航功能实现完整源代码附效果图，讲解
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 一:需求及效果图展示从后端API获取到起始地和目的地的经纬度坐标与地名.用户点击起始地便打开地图展示 ...
解决微信小程序银行卡号输入转换格式
解决微信小程序银行卡号输入转换格式问题 ps:2017-02-17 19:44 (发现新bug,暂已解决优化中) 新手第一次写博客,请多多见谅! (感觉会有更好的办法,希望有大牛能对我指点指点) 输入 ...
微信小程序自定义输入仿咸鱼发布
微信小程序自定义输入仿咸鱼发布效果图效果图2 主要代码 .js // pages/user/release/release.js import Toast from 'vant-weapp/toa ...
【微信小程序/实现】实现留言墙功能页面
[微信小程序/实现]实现留言墙功能一.需求分析二.功能设计三.页面设计四.代码 (一)核心代码:向服务器发出请求 (二)完整代码 message.wxml message.wxss messa ...
微信小程序利用云开发实现评论功能
微信小程序利用云开发实现评论功能如果喜欢可以给我一个关注. 一.微信小程序,评论功能的实现. 首先我们先布局,一个文章或者是商品,底下是评论,  <vie ...

微信小程序实现输入车牌号码的功能（附效果图）

实现需求：

实现效果图：

实现步骤

1 . `wxml` 文件

2. `js` 文件

最后实现了输入车牌号码的功能以及新增新能源车辆的功能

微信小程序实现输入车牌号码的功能（附效果图）相关推荐

最新文章

热门文章

微信小程序实现输入车牌号码的功能（附效果图）

实现需求：

实现效果图：

实现步骤

1 . wxml 文件

2. js 文件

最后实现了输入车牌号码的功能 以及新增新能源车辆的功能

微信小程序实现输入车牌号码的功能（附效果图）相关推荐

最新文章

热门文章

1 . `wxml` 文件

2. `js` 文件

最后实现了输入车牌号码的功能以及新增新能源车辆的功能