微信小程序实现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 相关文章推荐
jquery cookie插件代码类
May 26 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
Sep 10 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
Nov 08 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
Dec 18 Javascript
javascript解三阶幻方(九宫格)
Apr 22 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
Bootstrap插件全集
Jul 18 Javascript
AngularJS基础 ng-srcset 指令简单示例
Aug 03 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
vue中实现滚动加载更多的示例
Nov 08 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
短波问题解答
2021/02/28 无线电
php判断正常访问和外部访问的示例
2014/02/10 PHP
PHPer 需要了解的 5 个 Composer 小技巧
2014/08/18 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
checkbox 多选框 联动实现代码
2008/10/22 Javascript
js 表单验证方法(实用)
2009/04/28 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
[02:41]2015国际邀请赛中国区预选赛观战指南
2015/05/20 DOTA
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
Python实现多并发访问网站功能示例
2017/06/19 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
HTML中fieldset标签概述及使用方法
2013/02/01 HTML / CSS
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
经理秘书岗位职责
2013/11/14 职场文书
网络信息管理员岗位职责
2014/01/05 职场文书
启动仪式策划方案
2014/06/14 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
学习十八大的心得体会
2014/09/01 职场文书
安全生产先进个人事迹材料
2014/12/30 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
Redis实现分布式锁的五种方法详解
2022/06/14 Redis