微信小程序?qū)崿F(xiàn)MUI數(shù)字輸入框效果

更新時間：2018年01月31日 16:23:10 作者：Rattenking

這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)MUI數(shù)字輸入框效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序?qū)崿F(xiàn)MUI數(shù)字輸入框的具體代碼，供大家參考，具體內(nèi)容如下

效果圖

數(shù)字輸入框效果圖

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下載

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript實現(xiàn)九宮格拖拽效果
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)九宮格拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-06-06
JavaScript實現(xiàn)仿新浪微博大廳和騰訊微博首頁滾動特效源碼
最近看到朋友用JavaScript實現(xiàn)仿新浪微博大廳和未登錄騰訊微博首頁滾動效果，朋友使用jquery實現(xiàn)的，在網(wǎng)上看到有用js制作的也比較好，于是把我的內(nèi)容整理分享給大家，具體詳解請看本文
2015-09-09
JavaScript實現(xiàn)簡單的星星評分效果
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單的星星評分效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05
JavaScript編寫棋盤覆蓋代碼詳解
這篇文章主要介紹了JavaScript編寫棋盤覆蓋代碼詳解,需要的朋友可以參考下
2017-08-08
JavaScript快速實現(xiàn)一個顏色選擇器
在做前端界面開發(fā)的時候，遇到需要改變顏色的需求，就需要使用顏色選擇器。本文就來用JavaScript編寫一個簡單的顏色選擇器，感興趣的可以了解一下
2023-02-02
es6新增對象的實用方法總結(jié)
在JavaScript中,幾乎每一個值都是某種特定類型的對象,于是ES6也著重提升了對象的功能性,下面這篇文章主要給大家介紹了關(guān)于es6新增對象實用方法的相關(guān)資料,需要的朋友可以參考下
2022-05-05
原生js實現(xiàn)簡單輪播圖效果
這篇文章主要為大家詳細介紹了原生js實現(xiàn)簡單輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
基于JavaScript實現(xiàn)輪播圖代碼
在前端程序開發(fā)中，經(jīng)常會實現(xiàn)js輪播圖的效果，怎么實現(xiàn)的呢？下面小編給大家分享基于基于JavaScript實現(xiàn)輪播圖代碼，非常不錯，感興趣的朋友可以參考下
2016-07-07
基于小程序請求接口wx.request封裝的類axios請求
這篇文章主要介紹了基于小程序請求接口wx.request封裝的類axios請求，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-07-07
Js檢查變量類型的代碼()
本文章為你提供一款js 返回變量的類型代碼哦，如果你不懂得如何獲取js變量的類型的話，看看我們下面的代碼你就知道如何獲取js變量的代碼哦。
2010-07-07