微信小程序实现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 学习笔记(十三)Dom创建表格
Jan 21 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
javascript仿百度输入框提示自动下拉补全
Jan 07 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
webpack4.0 入门实践教程
Oct 08 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 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
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
PHP写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
关于PHP实现异步操作的研究
2013/02/03 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
php实现paypal 授权登录
2015/05/28 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
php实现微信支付之企业付款
2018/05/30 PHP
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
[jQuery] 事件和动画详解
2019/03/05 jQuery
微信小程序中weui用法解析
2019/10/21 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
跟老齐学Python之变量和参数
2014/10/10 Python
Python 数据结构之旋转链表
2017/02/25 Python
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
师范大学毕业自我鉴定
2013/11/21 职场文书
营业员演讲稿
2013/12/30 职场文书
个性发展自我评价
2014/02/11 职场文书
十佳护士先进事迹
2014/05/08 职场文书
关于保护环境的建议书
2014/08/26 职场文书
学籍证明模板
2015/06/18 职场文书
聘任书格式及范文
2015/09/21 职场文书