微信小程序数字键盘(仿微信转账键盘)

这篇具有很好参考价值的文章主要介绍了微信小程序数字键盘(仿微信转账键盘)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序input自带数字输入键盘,不过是直接调用的系统键盘,无法个性化。

代码中使用使用了Vant WeappVant UI小程序版,这里就不介绍相关安装说明了,大家自行安装Vant Weapp。
微信小程序数字键盘(仿微信转账键盘),Vant UI,微信小程序,数字键盘,前端

json 用到的组件

{
  "usingComponents": {
    "van-cell": "@vant/weapp/cell/index",
    "van-button": "@vant/weapp/button/index",
    "van-popup": "@vant/weapp/popup/index",
    "van-field": "@vant/weapp/field/index",
    "van-row": "@vant/weapp/row/index",
    "van-col": "@vant/weapp/col/index"
  }
}

wxml 结构

<van-cell title="分数" value="{{score || '点击打分'}}" bindtap="tapScore" />

<!-- 打分键盘 -->
<van-popup
  show="{{ keyboardShow }}"
  position="bottom"
  custom-style="height: 508rpx;"
  bind:close="onClose"
>
  <view class="keyborad">
    <view class="input">
      <van-field
        value="{{ value }}"
        custom-style="border: 2prx solid #dcdee0"
        placeholder="请选择分数"
        disabled
      />
    </view>
    <view class="number-keyboard">
      <van-row class="number" gutter="10">
        <van-col
          wx:for="{{number}}"
          wx:key="index"
          data-key="{{item}}"
          custom-class="number-item"
          span="{{item === 0 ? '16' : '8'}}"
          bindtap="tapNumber">
          <view class="number-item__key tap-key">{{item}}</view>
        </van-col>
      </van-row>
      <view class="operation">
        <view class="del tap-key" bindtap="tapBksp">
          <image class="del-icon" src="/assets/backspace.png"></image>
        </view>
        <view class="confirm tap-key" bindtap="confirm">确定</view>
      </view>
    </view>
  </view>
</van-popup>

js 内容

Page({
  data: {
    score: '',
    keyboardShow: false,
    value: '',
    number: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, '.']
  },
  tapScore() {
    this.setData({
      keyboardShow: true
    })
  },
  onClose() {
    this.setData({
      keyboardShow: false
    })
  },
  // number点击
  tapNumber(e) {
    const { key } = e.currentTarget.dataset
    let { value } = this.data
    value += key
    /**
     * 限制输入
     * 开头不能是小数点
     * 只能有一位小数点
     * 0开头只能跟小数点
     * 小数点后限制一位
     */
    value = String(value)
            .replace(/^\./g, '')
            .replace('.', '$#$')
            .replace(/\./g, '')
            .replace('$#$', '.')
            .replace(/^00$/, '0')
            .replace(/^0(\d)/g, '$1')
            .replace(/^(-)*(\d+)\.(\d{1}).*$/, '$1$2.$3')

    this.setData({
      value
    })
  },
  // 退格
  tapBksp() {
    let { value } = this.data
    value = String(value)
    value = value.substr(0, value.length - 1)
    this.setData({
      value
    })
  },
  // 确定
  confirm() {
    let { value } = this.data
    this.setData({
      score: value,
      keyboardShow: false
    })
  },
})

wxss 样式文章来源地址https://www.toymoban.com/news/detail-608495.html


.keyborad .number-keyboard {
  display: flex;
  background-color: #ebedf0;
  padding: 20rpx 20rpx 0 20rpx;
}
.keyborad .number-keyboard .tap-key:active {
  opacity: 0.8;
}
.keyborad .number-keyboard .number {
  flex: 1;
}
.keyborad .number-keyboard .number .number-item {
  margin-bottom: 20rpx;
}
.keyborad .number-keyboard .number .number-item .number-item__key {
  background-color: #fff;
  text-align: center;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 8rpx;
  font-size: 32rpx;
  font-weight: 700;
}
.keyborad .number-keyboard .operation {
  width: 200rpx;
  display: flex;
  flex-direction: column;
  margin: 0 0 20rpx 20rpx;
}
.keyborad .number-keyboard .operation .del {
  height: 80rpx;
  text-align: center;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.keyborad .number-keyboard .operation .del .del-icon {
  width: 40rpx;
  height: 40rpx;
}
.keyborad .number-keyboard .operation .confirm {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #04943f;
  border-radius: 8rpx;
  color: #fff;
  font-size: 36rpx;
}
.keyborad .van-field__control--disabled {
  color: #666 !important;
}

到了这里,关于微信小程序数字键盘(仿微信转账键盘)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序修改vant组件样式

    1 背景 在使用vant组件开发微信小程序的时候,想更改vant组件内部样式,达到自己想要的目的(van-grid组件改成宫格背景色为透明,默认为白色),官网没有示例,通过以下几步修改成功。 2 步骤 2.1 查看官方文档 Grid 外部样式类 支持修改Grid组件样式,我们在组件上添加该属

    2024年02月09日
    浏览(67)
  • 微信小程序使用vant时报警告

     [Component] property \\\"value\\\" of \\\"miniprogram_npm/@vant/weapp/field/index\\\" received type-uncompatible value: expected String but get null value. Use empty string instead.  这个问题大概率是vant组自己的问题 降低微信开发者工具版本 降低到2.18.1之前的版本 这个问题是2.18.1时出现的    

    2024年02月12日
    浏览(50)
  • 微信小程序 - 超详细 “长按说话“ 实时语音录制与播放功能,仿微信发语音 “按住说话,松开取消“ 录音功能效果(详细示例源码,一键复制开箱即用!)

    网上的教程代码都太乱了,各种乱七八糟的代码还没有注释,根本无法复制后进行改造。 在微信小程序项目开发中,详细的实现了长按录音、上滑手势取消等功能,丝滑流畅不卡顿 你直接直接粘贴,稍微改改提示文字和样式就能用到你的项目了。

    2024年02月15日
    浏览(42)
  • 微信小程序加vant列表表单验证

    2024年02月15日
    浏览(39)
  • 微信小程序Vant组件配置及使用

    Vant Weapp 官网文档:介绍 - Vant Weapp (gitee.io) Vant Weapp GitHub地址:youzan/vant-weapp: 轻量、可靠的小程序 UI 组件库 (github.com) 本教程使用下载代码方式引入vant组件 通过git下载vant源码 将vant源码路径下的 dist 文件夹复制到微信小程序项目中 将 app.json 下的 \\\"style\\\": \\\"v2\\\" 去除,微信小程序

    2024年02月13日
    浏览(72)
  • 原生微信小程序使用 wxs;微信小程序使用 vant-weapp组件

    在这里插入图片描述 操作顺序 :文档地址 如果使用 typescript 需要操作步骤3,否则不需要操作 2.1 在根目录下 操作 2.2 安装版本 2.3 构建包 - 详情-勾选使用 npm 2.4 使用 vant 组件

    2024年02月11日
    浏览(66)
  • uniapp微信小程序引入vant组件库

    1、首先要有uniapp项目,根据vant官方文档使用yarn或npm安装依赖: 安装完依赖如下: 2、在uniapp项目根目录下(也可以指定目录)本案例在根目录下新建:wxcomponents文件夹 !!!!必须是wxcomponents文件夹! !!!!必须是wxcomponents文件夹! !!!!必须是wxcomponents文件夹! (原

    2024年02月16日
    浏览(83)
  • 在微信小程序中怎么使用vant框架?

    Vant 是一个轻量、可定制的移动端组件库,于 2017 年开源。 目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。 Vant 是有赞前端团队开源的移动端组件库,于 2017 年开源,已持续维护 4 年时间。Vant 对内承载了有赞所

    2024年02月10日
    浏览(62)
  • 微信小程序+vant组件 侧边导航栏切换显示

    设计页面时希望效果:左侧侧边导航栏,右侧内容。点击左侧导航栏的不同块,右侧显示不同内容。 采用了vant组件中侧边导航栏van-sidebar,van-sidebar子标签包括多个van-sidebar-item 实现方法: van-sidebar中设置 bind:change=\\\"onChange\\\": 随后在js文件中编写onChange(event),其中event.deta

    2024年02月13日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包