微信小程序实现MUI数字输入框效果


Posted in Javascript onJanuary 31, 2018

本文实例为大家分享了微信小程序实现MUI数字输入框的具体代码,供大家参考,具体内容如下

效果图

微信小程序实现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下载

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
JavaScript的事件机制详解
Jan 17 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
Apr 12 Javascript
bootstrap弹出层的多种触发方式
May 10 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
使用DataTable插件实现异步加载数据
Nov 19 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 Javascript
基于html+css+js实现简易计算器代码实例
Feb 28 Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 Javascript
React实现todolist功能
Dec 28 Javascript
微信小程序实现折叠面板
Jan 31 #Javascript
Vue中render函数的使用方法
Jan 31 #Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 #Javascript
微信小程序scroll-view组件实现滚动动画
Jan 31 #Javascript
微信小程序实现全国机场索引列表
Jan 31 #Javascript
微信小程序radio组件使用详解
Jan 31 #Javascript
微信小程序checkbox组件使用详解
Jan 31 #Javascript
You might like
《PHP边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
第五章 php数组操作
2011/12/30 PHP
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
jquery 使用点滴函数代码
2011/05/20 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
web打印小结
2017/01/11 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
Python中字符串的格式化方法小结
2016/05/03 Python
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
Django ORM 常用字段与不常用字段汇总
2019/08/09 Python
Python文件操作基础流程解析
2020/03/19 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
英国在线药房和在线医生:LloydsPharmacy
2019/10/21 全球购物
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
办公室岗位职责范本
2015/04/11 职场文书
图神经网络GNN算法
2022/05/11 Python