微信小程序----MUI数字输入框

效果体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

DEMO下载

效果图

WXML

<view class="tui-content"><view class="tui-gallery-list">默认</view><view class="tui-gallery-list"><view class="tui-number-group"><button class="tui-number-cell" bindtap="nextNum">-</button><input class="tui-number-cell" type="number" value='{{number}}'></input><button class="tui-number-cell" bindtap="prevNum">+</button></view></view><view class="tui-gallery-list">限定最小值0,最大值10</view><view class="tui-gallery-list"><view class="tui-number-group"><button class="tui-number-cell" bindtap="nextNum1" disabled='{{disabled1}}'>-</button><input class="tui-number-cell" type="number" value='{{number1}}'></input><button class="tui-number-cell" bindtap="prevNum1" disabled='{{disabled2}}'>+</button></view></view>
</view>

WXSS

.tui-number-group{display: table;table-layout: fixed;width: 300rpx;text-align: center;border-radius: 6px;border: 1px solid #bbb;overflow: hidden;
}
.tui-number-cell{display: table-cell;line-height: 1.7;border-radius: 0;
}
button::after{border-bottom: none;border-top: none;border-radius: 0;
}

JS

Page({data: {number: 1,number1: 5,disabled1: false,disabled2: false},prevNum(){this.setData({ number: this.data.number + 1 });},nextNum(){this.setData({ number: this.data.number - 1 });},prevNum1() {this.setData({ number1: this.data.number1 >= 10 ? 10 : this.data.number1 + 1 ,disabled1: this.data.number1 !== 0 ? false : true,disabled2: this.data.number1 !== 10 ? false : true});},nextNum1() {this.setData({ number1: this.data.number1 <= 0 ? 0 : this.data.number1 - 1 ,disabled1: this.data.number1 !== 0 ? false : true,disabled2: this.data.number1 !== 10 ? false : true});}
})

注意

button组件的边框和圆角设置在button::after，需要对其重置。

WXRUI体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

其他

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表

微信小程序----MUI数字输入框相关推荐

微信小程序界面从右边滑出_微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动，右侧滑动)...
本文实例讲述了微信小程序MUI侧滑导航菜单.分享给大家供大家参考,具体如下: 实现的目标--YDUI的Popup组件点击列表图标--左侧的菜单栏显示--点击关闭按钮或者右侧的遮罩层--左侧菜单栏关闭 ...
ios微信小程序中 input 输入框问题，输入的光标中的内容自动清空
ios微信小程序中 input 输入框问题,输入的光标中的内容自动清空问题描述 1.我在页面上有个倒计时的功能,每一秒都在更新时间,更新时间显示的值(view一直变) 2.我调用input输入框,准 ...
微信小程序:调取数字键盘，没有小数点的解决办法
通常来说:input框有type这个属性,我们通常使用text.number .checkbox等这些常用的type值来限制输入框的输入. 在微信小程序中,当我们的输入框的type值为number的时 ...
微信小程序emoji表情输入框制作
hello,I'm Shendi 最近弄了个表情输入框,在这里记录分享一下文章目录效果演示实现思路全部源码地址效果演示小程序表情列表输入演示源码链接放到了最底部实现思路微信小程序默认 ...
解决uni-app微信小程序底部input输入框，键盘弹起时页面整体上移问题
一.存在的问题: 微信小程序聊天界面,当input 框获取焦点时会自动调起手机键盘,当键盘弹起时,会导致页面整体上移,页面头信息会消失不见. 二.需要实现的效果键盘弹出时, 底部的 ...
微信小程序自定义文本输入框
本文摘录于:https://blog.csdn.net/ZNYSYS520/article/details/81878598-只是做学习备份之用,绝无抄袭之意,有疑惑请联系本人! 这里参考git仓库, ...
android 支付数字键盘,微信小程序自定义数字键盘|仿支付宝、微信支付数字软键盘...
(此图片来源于网络,如有侵权,请联系删除! ) 前几天有开发过一个html5仿支付宝.微信支付数字键盘,在某些特定场景下自定义数字键盘应用还是蛮广泛的,比如小程序商城系统需要零钱支付 ,会员卡支付 ...
微信小程序——修改field输入框内文字颜色和背景图透明度调整
一.修改field输入框内的文字的颜色我用的vant组件,所以直接在页面写的样式,先上代码 <van-field custom-style="-webkit-text-fill-co ...
微软收购暴雪计划遭拒/ Edge被曝泄露浏览记录/ 微信小程序可用数字人民币...今日更多新鲜事在此...
日报君发自凹非寺量子位 | 公众号 QbitAI 大家好,今天是4月27日星期四,是这个月倒数第二天上班了~ 在假期可以翘首以待的日子里,还是来和日报君看看今天的科技圈资讯吧~ 微信支持数字人民 ...

微信小程序----MUI数字输入框

效果体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

效果图

WXML

WXSS

JS

注意

WXRUI体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

其他

微信小程序----MUI数字输入框相关推荐

最新文章

热门文章