微信小程序实现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 相关文章推荐
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
扩展JS Date对象时间格式化功能的小例子
Dec 02 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
JavaScript基础篇(6)之函数表达式闭包
Dec 11 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 Javascript
详解如何使用node.js的开发框架express创建一个web应用
Dec 20 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
Oct 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 中的一些经验积累
2006/10/09 PHP
php小偷相关截取函数备忘
2010/11/28 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
Add Formatted Text to a Word Document
2007/06/15 Javascript
JavaScript中的style.display属性操作
2013/03/27 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
Javascript中级语法快速入手
2016/07/30 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
jQuery内容选择器与表单选择器实例分析
2019/06/28 jQuery
js实现星星打分效果
2020/07/05 Javascript
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
Python之Web框架Django项目搭建全过程
2017/05/02 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
Python测试线程应用程序过程解析
2019/12/31 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
python入门之井字棋小游戏
2020/03/05 Python
在Python中实现字典反转案例
2020/12/05 Python
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
药学专业大学生自荐信
2013/09/28 职场文书
作风整顿剖析材料
2014/09/30 职场文书
2015年财务部工作总结
2015/04/10 职场文书
2015公司年度工作总结
2015/05/14 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
公司欠款证明
2015/06/24 职场文书
小学毕业感言100字
2015/07/30 职场文书
终止合同协议书范本
2016/03/22 职场文书