微信小程序实现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 相关文章推荐
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
js判断浏览器类型为ie6时不执行
Jun 15 Javascript
JQuery限制复选框checkbox可选中个数的方法
Apr 20 Javascript
对于jQuery性能的一些优化建议
Aug 13 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 Javascript
全面解析Javascript无限添加QQ好友原理
Jun 15 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Oct 05 Javascript
微信小程序 页面跳转传递值几种方法详解
Jan 12 Javascript
在vue中使用jointjs的方法
Mar 24 Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 Javascript
js+html+css实现手动轮播和自动轮播
Dec 30 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数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
浅谈php和.net的区别
2014/09/28 PHP
Opcache导致php-fpm崩溃nginx返回502
2015/03/02 PHP
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
基于vue.js实现图片轮播效果
2016/12/01 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
python人人网登录应用实例
2014/09/26 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
Django框架模板介绍
2019/01/15 Python
python实现桌面气泡提示功能
2019/07/29 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
keras得到每层的系数方式
2020/06/15 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
售后服务科岗位职责范文
2013/11/13 职场文书
职务说明书范文
2014/05/07 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
2014年药品销售工作总结
2014/12/16 职场文书
灵能百分百第三季什么时候来?
2022/03/15 日漫