首頁 > 微信小程式 > 小程式開發 > 微信小程式MUI數位輸入框效果的實作方法

微信小程式MUI數位輸入框效果的實作方法

小云云
發布: 2018-02-02 10:20:05
原創
2820 人瀏覽過

本文主要為大家詳細介紹了微信小程式實現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=&#39;{{number}}&#39;></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=&#39;{{disabled1}}&#39;>-</button>
  <input class="tui-number-cell" type="number" value=&#39;{{number1}}&#39;></input>
  <button class="tui-number-cell" bindtap="prevNum1" disabled=&#39;{{disabled2}}&#39;>+</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,需要對其重設。


相關推薦:


javascript實作仿銀行密碼輸入框效果的程式碼_javascript技巧

##js實現雙擊單元格變成文字輸入框效果代碼_javascript技巧

javascript程式碼實作input輸入框模糊提示功能

以上是微信小程式MUI數位輸入框效果的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板