微信小程序實現(xiàn)MUI數(shù)字輸入框效果
更新時間：2018年01月31日 16:23:10 作者：Rattenking
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)MUI數(shù)字輸入框效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序實現(xiàn)MUI數(shù)字輸入框的具體代碼，供大家參考，具體內(nèi)容如下
效果圖
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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了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)簡單的星星評分效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了JavaScript編寫棋盤覆蓋代碼詳解,需要的朋友可以參考下2017-08-08
在做前端界面開發(fā)的時候，遇到需要改變顏色的需求，就需要使用顏色選擇器。本文就來用JavaScript編寫一個簡單的顏色選擇器，感興趣的可以了解一下2023-02-02
在JavaScript中,幾乎每一個值都是某種特定類型的對象,于是ES6也著重提升了對象的功能性,下面這篇文章主要給大家介紹了關于es6新增對象實用方法的相關資料,需要的朋友可以參考下2022-05-05
這篇文章主要為大家詳細介紹了原生js實現(xiàn)簡單輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
在前端程序開發(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變量的代碼哦。2010-07-07