时间:2021-05-18
本文实例为大家分享了微信小程序实现MUI数字输入框的具体代码,供大家参考,具体内容如下
效果图
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,需要对其重置。
DEMO下载
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
微信小程序input输入框控件今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需
微信小程序输入框input相关文章:微信小程序Button微信小程序radio微信小程序slider微信小程序switch微信小程序textarea微信小程序p
本文实例为大家分享了Vue.js数字输入框组件的具体实现代码,供大家参考,具体内容如下效果入口页index.html数字输入框组件数字输入框组件input-nu
这篇文章给大家分享一个小的JavaScript的案例,就是模仿微博输入框的效果。效果图:代码:仿微博输入框效果您还可以输入140个字//给文本域响应键盘按下事件
本文讲述了微信小程序使用form表单获取输入框数据的实例代码。分享给大家供大家参考,具体如下:1、效果展示2、关键代码index.wxml用户名:密码:登录重置