微信小程序实现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对文本框值的判断示例
Mar 10 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
Javascript验证上传图片大小[前台处理]
Jul 18 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
JavaScript设计模式经典之工厂模式
Feb 24 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
vue实现简单的登录弹出框
Oct 26 Javascript
Vue3实现简易音乐播放器组件
Aug 14 Vue.js
微信小程序实现折叠面板
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 SPL使用方法和他的威力
2013/11/12 PHP
浅析ThinkPHP中的pathinfo模式和URL重写
2014/01/06 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
JavaScript jquery及AJAX小结
2016/01/24 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
jQuery Validate设置onkeyup验证的实例代码
2016/12/09 Javascript
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
javascript for循环性能测试示例
2019/08/07 Javascript
基于原生js实现判断元素是否有指定class名
2020/07/11 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
vue前端和Django后端如何查询一定时间段内的数据
2021/02/28 Vue.js
构建Python包的五个简单准则简介
2015/06/15 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
意大利网上药房:Farmacia 33
2020/01/27 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
会计实习自我鉴定
2013/12/04 职场文书
物理力学求职信
2014/02/18 职场文书
基层党组织公开承诺书
2014/03/28 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
今日说法观后感
2015/06/08 职场文书
七年级之家长会发言稿范文
2019/09/04 职场文书
MySQL限制查询和数据排序介绍
2022/03/25 MySQL
AngularJS实现多级下拉框
2022/03/25 Javascript