微信小程序实现车牌号输入自定义键盘

已于 2024-03-22 11:40:46 修改
阅读量1.3k 收藏 4
点赞数 1
文章标签： 微信小程序 计算机外设 小程序
于 2023-09-26 10:06:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34724739/article/details/133297315
版权

实现输入车牌号功能，I是在车牌号里不能输入得，在键盘上就没有展示，O是只在第二位上可以输入，
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

wxml

 <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 {{carnum.length > 7? '': 'carNumber-item-newpower'}}" bindtap='openKeyboard'>{{carnum[7] || '新能源'}}</view>  
    </view>
      </view>

<!-- 虚拟键盘 -->
<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'>
        清除
      </view>
    </view>
    <!-- 车牌号码选择键盘 -->
    <view class="keyboard-item iscarnumber" hidden="{{!carnum[0]}}">
      <view class="keyboard-line {{provinces?'grey-line':''}}" wx:for="{{numbers}}" wx:key="{{index}}">
        <view class="keyboard-btn {{(!carnum[1] && numbers[1]== item) || (!carnum[5]&&numbers[0] == item) ||(carnum[6]&&numbers[0] == item) ||(carnum[1] &&itemlist == 'O') ?'keyboard-btn-gery':''}}" wx:for="{{item}}" wx:key="{{index}}" data-val="{{itemlist}}" wx:for-item="itemlist" bindtap='bindChoose'>{{itemlist}}</view>
      </view>
      <view class="keyboard-del" bindtap='bindDelChoose'>
        清除
      </view>
    </view>
  </view>

wxss

/* 虚拟键盘 */
.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 30rpx;
  text-align: center;
}

.iscarnumber .keyboard-line {
  text-align: center;
  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: 15rpx 55rpx;
  box-shadow: 0 2rpx 0 0 #999999;
  border-radius: 10rpx;
  margin: 5rpx;
  position: absolute;
  bottom: 37rpx;
  right: 6rpx;
}

.keyboard-del-font {
  font-size: 25px;
  width:40rpx;
  height:40rpx;
  display: block;
}

/* 车牌号码 */
.carNumber-items {
  text-align: center;
  display: flex;
  align-items: center;
}

.carNumber-items-box {
  display: flex;
  vertical-align: middle;
  position: relative;
  margin-right: 30rpx;
}

.carNumber-items-box-list {
  text-align: center;
  display: inline-block;
  font-size: 38rpx;
  font-family: PingFang;
  font-weight: bold;
  color: #2D2D2D;
  vertical-align: middle;
}

.carNumber-items-province {
  /* border-right: 1rpx solid #ccc; */
  width: 100rpx;
  height: 82rpx;
  background: #F9F9F9;
  line-height: 82rpx;
border-radius: 5rpx;
}
.carNumber-items-En{
  margin-left: 8rpx;
  width: 73rpx;
  height: 82rpx;
  background: #F9F9F9;
  line-height: 82rpx;
border-radius: 5rpx;
}


.carNumber-items-box::after {
  content: "";
  width: 8rpx;
  height: 8rpx;
  border-radius: 50%;
  background-color: #2D2D2D;
  position: absolute;
  right: -22rpx;
  top: 40rpx;

}

.carNumber-item {
  margin-left: 8rpx;
  width: 73rpx;
  height: 82rpx;
  background: #F9F9F9;
  line-height: 82rpx;
  border-radius: 5rpx;
  font-size: 38rpx;
  font-family: PingFang;
  font-weight: bold;
  color: #2D2D2D;
}

/* 新能源 */
.carNumber-item-newpower {
background: #DAF6EA;
font-size: 18rpx;
font-family: PingFang;
font-weight: 500;
color: #01DC84;
}

.carNumber-newpower-add {
  font-size: 18px;
}

/* 确认按钮 */
.carNumberBtn {
  border-radius: 4rpx;
  margin: 80rpx 40rpx;
}
.carNumber{
  margin-bottom: 50rpx;
}
.keyboard-btn-gery{
  color:#e4e7ec;
}

js data键盘信息是写死得

numbers: [
      ["港", "澳", "学","警","领"],
      ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
      ["A", "B", "C", "D", "E", "F", "G", "H","O","J",],
      ["K","L", "M", "N", "P", "Q", "R", "S", "T","U"],
      ["V","W", "X", "Y", "Z"],
    ],
     provinces: [
      ['京', '沪', '粤', '津', '冀', '晋', '蒙', '辽', '吉', '黑'],
      ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],
      ['桂', '琼', '渝', '川', '贵', '云', '藏','陕','甘'],
      ['青', '宁', '新','港','澳'],,
    ],
    KeyboardState: false,

addCarNumber 是保存接口了

  bindChoose(e) {
    // 第2位置键盘第两排不可点（数字键盘），除第2位置O不可点，除第6位置键盘第1排都不可点（港）
    if((!this.data.carnum[1] && this.data.numbers[1].indexOf(e.currentTarget.dataset.val) > -1) || (!this.data.carnum[5]&&this.data.numbers[0].indexOf(e.currentTarget.dataset.val) >-1) ||(this.data.carnum[6]&&this.data.numbers[0].indexOf(e.currentTarget.dataset.val) >-1) ||(this.data.carnum[1] &&e.currentTarget.dataset.val == 'O') ){
    } else {
      if (!this.data.carnum[7]) {
        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
      })
    }
  },
    submitNumber() {
    var that = this;
    if(!that.data.editStatus){
      if (that.data.carnum[6] || that.data.carnum[7]) {
        var number;
        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{
          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
        })
        return
      }
    } else {
      that.addCarNumber()
    }
    
  },

h5 版的

<template>
  <div>
  <div class="carNumber">
    <div class="weui-cells__title"></div>
    <!-- 车牌号头两位 -->
    <div class="carNumber-items">
      <div class="carNumber-items-box" @click='openKeyboard'>
        <div class="carNumber-items-province carNumber-items-box-list">{{carnum[0] || ''}}</div>
        <div class="carNumber-items-En carNumber-items-box-list">{{carnum[1] || ''}}</div>
      </div>
      <!-- 常规 -->
      <div class="carNumber-item" @click='openKeyboard'>{{carnum[2] || ''}}</div>
      <div class="carNumber-item" @click='openKeyboard'>{{carnum[3] || ''}}</div>
      <div class="carNumber-item" @click='openKeyboard'>{{carnum[4] || ''}}</div>
      <div class="carNumber-item" @click='openKeyboard'>{{carnum[5] || ''}}</div>
      <div class="carNumber-item" @click='openKeyboard'>{{carnum[6] || ''}}</div>
      <div class="carNumber-item " :class="{ 'carNumber-item-newpower': carnum.length <= 7 }" @click='openKeyboard'>{{carnum[7] || '新能源'}}</div>
    </div>
</div>
<!-- 虚拟键盘 -->
<div class="keyboard" v-if='KeyboardState'>
    <div class="keyboardClose">
      <div class="keyboardClose_btn" @click='closeKeyboard'>关闭</div>
    </div>
    <!-- 省份简写键盘 -->
    <div class="keyboard-item" v-if="!carnum[0]">
      <div class="keyboard-line" v-for="(item,index) in provinces" :key="index">
        <div class="keyboard-btn" v-for="(itemlist,index) in item" :key="index" @click='bindChoose(itemlist)'>{{itemlist}}</div>
      </div>
      <div class="keyboard-del" @click='bindDelChoose'>
        清除
      </div>
    </div>
    <!-- 车牌号码选择键盘 -->
    <div class="keyboard-item iscarnumber" v-if="carnum[0]">
      <div class="keyboard-line" :class="{ 'grey-line': provinces }" v-for="(item,index) in numbers" :key="index">
        <div class="keyboard-btn " :class="{'keyboard-btn-gery':(!carnum[1] && numbers[1]== item) || (!carnum[5]&&numbers[0] == item) ||(carnum[6]&&numbers[0] == item) ||(carnum[1] &&itemlist == 'O')}"   v-for="(itemlist,index) in item" :key="index" @click='bindChoose(itemlist)'>{{itemlist}}</div>
      </div>
      <div class="keyboard-del" @click='bindDelChoose'>
        清除
      </div>
    </div>
</div>
  </div>

</template>

<script>
export default {
data() {
  return {
    columnsIndex: 0,
    // 省份简写
    provinces: [
      ['京', '沪', '粤', '津', '冀', '晋', '蒙', '辽', '吉', '黑'],
      ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],
      ['桂', '琼', '渝', '川', '贵', '云', '藏', '陕', '甘'],
      ['青', '宁', '新', '港', '澳'],
    ],
    // 车牌输入
    numbers: [
      ["港", "澳", "学", "警", "领"],
      ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
      ["A", "B", "C", "D", "E", "F", "G", "H", "O", "J",],
      ["K", "L", "M", "N", "P", "Q", "R", "S", "T", "U"],
      ["V", "W", "X", "Y", "Z"],
    ],
    carnum: [],
    showNewPower: false,
    KeyboardState: false,
    id: '',//编辑车辆id
    carNumber: '',
  }
},

  /**
   * 组件的方法列表
   */
  created() {
  },
  methods: {
    bindChoose(e) {
      // 第2位置键盘第两排不可点（数字键盘），除第2位置O不可点，除第6位置键盘第1排都不可点（港）
      if ((!this.carnum[1] &&this.numbers[1].indexOf(e) > -1) || (!this.carnum[5] &&this.numbers[0].indexOf(e) > -1) || (this.carnum[6] &&this.numbers[0].indexOf(e) > -1) || (this.carnum[1] && e == 'O')) {
        if (!this.carnum[0]) {
          if (!this.carnum[7]) {
            var arr = [];
            arr[0] = e;
           this.carnum =this.carnum.concat(arr)
          }
        }
      } else {
        if (!this.carnum[7]) {
          var arr = [];
          arr[0] = e;
         this.carnum =this.carnum.concat(arr)
        }
      }
    },
    bindDelChoose() {
      if (this.carnum.length != 0) {
       this.carnum.splice(this.carnum.length - 1, 1);
      }

    },

    showPowerBtn() {
      this.showNewPower = true;
      this.KeyboardState = true;
    },
    closeKeyboard() {
      this.KeyboardState = false;
      this.showNewPower = false;
      // this.carnum = []
        },
    openKeyboard() {
      this.KeyboardState = true;
    },
    // 提交车牌号码
    submitNumber() {
      var that = this;
      if (that.carnum[6] || that.carnum[7]) {
        var number;
        if (that.carnum[7]) {
          number = that.carnum[0] + that.carnum[1] + that.carnum[2] + that.carnum[3] + that.carnum[4] + that.carnum[5] + that.carnum[6] + that.carnum[7];
          return number;
        } else {
          number = that.carnum[0] + that.carnum[1] + that.carnum[2] + that.carnum[3] + that.carnum[4] + that.carnum[5] + that.carnum[6];
          return number;
        }
      } else {
        wx.showToast({
          title: '请填写完整的车牌号码',
          icon: "none",
          duration: 2000
        })
        return false
      }

    },
    assignmentCarNum() {
      if (this.carInfo.length > 0) {
        this.carnum = this.carInfo
      }
    }
  }
}
</script>

<style  scoped>
.weui-cells__title {
  margin-top: 0.77em;
  margin-bottom: .3em;
  padding-left: 0.15rem;
  padding-right: 0.15rem;
  color: #999;
  font-size: 0.14rem;

}

/* 虚拟键盘 */
.keyboard {
  height: auto;
  background: #d1d5d9;
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  z-index: 9;
}

.keyboard-item {
  padding: 0.10rem 0 0.05rem 0;
  position: relative;
  display: block;
}

/* 关闭虚拟键盘 */
.keyboardClose {
  height: 0.70rem;
  background-color: #f7f7f7;
  overflow: hidden;
}

.keyboardClose_btn {
  float: right;
  line-height: 0.70rem;
  font-size: 0.15rem;
  padding-right: 0.30rem;
}

/* 虚拟键盘-省缩写 */

/* 虚拟键盘-行 */
.keyboard-line {
  margin: 0 auto 0.30rem;
  text-align: center;
}

.iscarnumber .keyboard-line {
  text-align: center;
  margin-left: 0.05rem;
}

/* 虚拟键盘-单个按钮 */
.keyboard-btn {
  font-size: 0.17rem;
  color: #333333;
  background: #fff;
  display: inline-block;
  padding: 0.18rem 0;
  width: 0.6rem;
  text-align: center;
  box-shadow: 0 0.02rem 0 0 #999999;
  border-radius: 0.10rem;
  margin: 0.05rem 0.06rem;
}

/* 虚拟键盘-删除按钮 */
.keyboard-del {
  font-size: 0.17rem;
  color: #333333;
  background: #A7B0BC;
  display: inline-block;
  padding: 0.15rem 0.55rem;
  box-shadow: 0 0.02rem 0 0 #999999;
  border-radius: 0.10rem;
  margin: 0.05rem;
  position: absolute;
  bottom: 0.37rem;
  right: 0.06rem;
}

.keyboard-del-font {
  font-size: 0.25rem;
  width:0.40rem;
  height:0.40rem;
  display: block;
}

/* 车牌号码 */
.carNumber-items {
  text-align: center;
  display: flex;
  align-items: center;
}

.carNumber-items-box {
  display: flex;
  vertical-align: middle;
  position: relative;
  margin-right: 0.30rem;
}

.carNumber-items-box-list {
  text-align: center;
  display: inline-block;
  font-size: 0.38rem;
  font-family: PingFang;
  font-weight: bold;
  color: #2D2D2D;
  vertical-align: middle;
}

.carNumber-items-province {
  /* border-right: 1rem solid #ccc; */
  width: 1.00rem;
  height: 0.82rem;
  background: #F9F9F9;
  line-height: 0.82rem;
border-radius: 0.05rem;
}
.carNumber-items-En{
  margin-left: 0.08rem;
  width: 0.73rem;
  height: 0.82rem;
  background: #F9F9F9;
  line-height: 0.82rem;
border-radius: 0.05rem;
}


.carNumber-items-box::after {
  content: "";
  width: 0.08rem;
  height: 0.08rem;
  border-radius: 50%;
  background-color: #2D2D2D;
  position: absolute;
  right: -0.22rem;
  top: 0.40rem;

}

.carNumber-item {
  margin-left: 0.08rem;
  width: 0.73rem;
  height: 0.82rem;
  background: #F9F9F9;
  line-height: 0.82rem;
  border-radius: 0.05rem;
  font-size: 0.38rem;
  font-family: PingFang;
  font-weight: bold;
  color: #2D2D2D;
}

/* 新能源 */
.carNumber-item-newpower {
background: #DAF6EA;
font-size: 0.18rem;
font-family: PingFang;
font-weight: 500;
color: #01DC84;
}

.carNumber-newpower-add {
  font-size: 18rem;
}

/* 确认按钮 */
.carNumberBtn {
  border-radius: 0.04rem;
  margin: 0.80rem 0.40rem;
}
.carNumber{
  margin: 0.50rem auto;
}
.input-flex{
  display: flex;
  align-items: center;
}
.weui-input{
  margin-top: 0.23rem;
  width: calc(100% - 0.90rem);
height: 0.70rem;
line-height: 0.70rem;
padding-left: 0.18rem;
background: #F9F9F9;
border-radius: 0.05rem;
font-size: 0.23rem;
font-family: PingFang;
font-weight: 500;
}
.input-text{
  margin-left: 0.10rem;
  line-height: 0.70rem;
  text-align: right;
  color: #2D2D2D;
  font-size: 0.30rem;
    font-family: PingFang;
    font-weight: 500;
  margin-top: 0.23rem;
}
.car-bom{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 160rem;
background: #FFFFFF;
display: flex;
justify-content: center;
padding-top: 0.17rem;
}
.car-add-btn{
  width: 5.50rem;
  height: 0.70rem;
background: #F2270C;
border-radius: 0.35rem;
text-align: center;
color: #fff;
line-height: 0.70rem;
font-size: 0.26rem;
}
.car-code{
  color: #2D2D2D;
  font-size: 0.26rem;
    font-family: PingFang;
    font-weight: 500; 
    margin-bottom: 0.20rem;
}
.keyboard-btn-gery{
  color:#e4e7ec;
}
</style>

在这里插入图片描述

啊呀阿荼
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序使用车牌号输入法
ZJW222的博客
08-19 2406
在做小程序时，做了一个关于车的项目，然后需要添加车辆信息、添加车牌号，使用车牌键盘输入，当时我把这个需求给砍了，然后在添加车辆信息时，老大看到数据库里我乱填的车牌号，又让我把他加上了^o^ 1.效果图 2.相关代码 使用组件形式实现键盘输入 组件代码index.wxml <view class="carPlate" wx:if="{{show}}"> <bloc...
微信小程序自定义车牌号输入键盘效果-案例
JackieDYH的博客
11-13 3970
自定义车牌号输入键盘 <!--pages/text/index.wxml--> <mp-navigation-bar loading="{{loading}}" show="{{show}}" animated="{{animated}}" color="{{color}}" background="{{background}}" title="键盘" back="{{true}}"></mp-navigation-bar> <view class="y.
微信小程序车牌键盘录入demo
10-24
微信小程序车牌键盘录入demo，亲测可用，自定义键盘，符合车牌录入方式。此demo中包含整个页面，如有问题，请留言
微信小程序使用车牌号输入法的示例代码
10-16
主要介绍了微信小程序使用车牌号输入法的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序车牌号码模拟键盘输入功能的实现代码
10-17
主要介绍了微信小程序车牌号码模拟键盘输入功能的实现代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
微信小程序车牌号码模拟键盘输入
weixin_30530523的博客
11-10 1054
微信小程序车牌号码模拟键盘输入练习， 未经允许，禁止转载，抄袭，如需借鉴参考等，请附上该文章连接。 相关资料参考：https://blog.csdn.net/littlerboss/article/details/79877918； 先来一波预览图。 预览图片一： 预览图二： 预览图三： 预览图四： ...
微信小程序车牌键盘
03-29
项目背景 公司要做一个停车场微信小程序，支持临时车预支付以及支付记录查询等功能,其中涉及车牌输入的功能，为了提升用户体验，避免繁琐的输入，决定自己写一个键盘。 效果图如下 省份简写键盘如下: (此图片来源于网络，如有侵权，请联系删除! ) 省份简写键盘 英文简写键盘如下: (此图片来源于网络，如有侵权，请联系删除! ) 英文简写键盘 源代码 目录结构 (此图片来源于网络，如有侵权，请联系删除! ) 目录结构 wxml文件内容   <view wx:if="{{isShow}}" class="vehicle-panel" style="height:430rpx;background-colo
微信小程序实现车牌号键盘
qq_46177396的博客
05-05 958
【代码】微信小程序实现车牌号键盘。
微信小程序 车牌号输入组件
神尐破
08-21 1849
有时候我们开发过程中会遇到需要用户输入车牌号的情况，让客户通过自带键盘输入，体验不好且容易出错，例如车牌号是不能输入O和I的，因此需要有一个自定义的键盘，让客户输入正确的车牌号viewtools.wxs 主要作用是补0，让界面好看些，如果有需要可以在这里改逻辑实现// 把车牌字符串转为数组if (!
微信小程序车牌号输入组件（虚拟键盘）
李水灵的博客
12-03 6321
本文参考 微信小程序中实现车牌输入功能， 进行了更加细致的键盘划分、删除等功能 文中给出代码都是截图，完整代码在文末贴出。 组件效果 组件功能： 其中虚拟键盘、新能源车牌等功能均可使用 封装成一个组件可以直接 Import 使用 可以给定默认初始值（如 gif 中所示） 父组件通过 change 事件可以监听到车牌号每一次的变化 组件部分样式也可以给定 class 来自定义 可以规范用户输入车牌号，防止乱输引起的数据库错乱 组件思路 根据车牌号的规则，根据不同的第几位生成键盘 例如：第一位为省.
微信小程序自定义键盘
每天都要努力学习哦~~
08-27 3323
【代码】微信小程序自定义键盘。
微信小程序开发-自定义车牌号码键盘
m0_60637088的博客
03-07 279
1.wxml文件 <view class="page"> 车牌号码输入框 <view><input bindtap="openKeyboard" value="{{carnum}}"/></view> <!-- 提交车牌 --> <button class="carNumberBtn" bindtap='submitNumber' style="background: #333333;color:#fff;" type="d
carnumber_input_微信小程序_车牌_
10-04
总的来说，"carnumber_input_微信小程序_车牌_"项目涉及到了微信小程序的开发、自定义组件创建、用户体验优化、数据处理等多个方面，是微信小程序开发中一个典型的案例，对于学习和掌握微信小程序开发具有很好的参考...
微信小程序-虚拟车牌输入键盘组件vehicleKeyboard-master.zip
09-25
在给定的压缩包文件“微信小程序-虚拟车牌输入键盘组件vehicleKeyboard-master.zip”中，包含了一个专为微信小程序设计的虚拟车牌输入键盘组件。这个组件的目的是提供一个自定义的键盘界面，用户可以方便地在小程序...
微信小程序 自定义车牌键盘测试demo
12-15
本测试Demo就是针对这种需求的一个实例展示，旨在帮助开发者理解和实现自定义键盘功能，特别是针对输入车牌号这样的特定场景。下面我们将深入探讨相关的知识点。 首先，我们需要了解微信小程序的基本架构。微信小...
微信小程序 自定键盘
挚友阳光的博客
01-14 1716
微信小程序自定义键盘
Tracy 小笔记：微信小程序 mpx 雷达图的实现
最新发布
weixin_48702807的博客
07-20 358
微信小程序 mpx 雷达图的实现
微信小程序中使用vant设置自定义tabbar
05-26
要在微信小程序中使用vant设置自定义tabbar，需要进行以下步骤： 1. 安装vant-ui库：在小程序根目录下执行命令`npm i vant-weapp -S`安装vant-ui库。 2. 引入vant组件：在app.json文件中，将需要用到的vant组件添加到"usingComponents"中，例如： ```json "usingComponents": { "van-tabbar": "/miniprogram_npm/vant-weapp/tabbar/index", "van-tabbar-item": "/miniprogram_npm/vant-weapp/tabbar-item/index" } ``` 3. 创建自定义tabbar组件：创建一个自定义tabbar组件，在其中使用vant的tabbar和tabbar-item组件来实现。 4. 在app.json中配置tabBar：将tabBar的"custom"属性设置为true，并将"custom"字段设置为自定义tabbar组件的路径，例如： ```json "tabBar": { "custom": true, "customKey": "tabBar" } ``` 注意：自定义tabbar组件的路径需要使用相对路径，以当前页面为基准。 5. 在自定义tabbar组件中监听tabbar切换事件：使用vant的tabbar组件时，可以监听"change"事件来实现tabbar切换时的逻辑。 以上就是使用vant在微信小程序中设置自定义tabbar的步骤，希望对你有帮助。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值