So verwenden Sie das WeChat-Applet, um den MUI-Effekt eines digitalen Eingabefelds zu erzielen-js-Tutorial-php.cn

So verwenden Sie das WeChat-Applet, um den MUI-Effekt eines digitalen Eingabefelds zu erzielen

亚连

Freigeben： 2018-06-08 15:56:12

Original

2026 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich das WeChat-Applet zur Implementierung des MUI-Digital-Eingabefeldeffekts im Detail vorgestellt. Es hat einen gewissen Referenzwert.

Das Beispiel in diesem Artikel wird mit allen auf WeChat geteilt . Der spezifische Code des Miniprogramms zur Implementierung des MUI-Nummerneingabefelds dient als Referenz:

Rendering

So verwenden Sie das WeChat-Applet, um den MUI-Effekt eines digitalen Eingabefelds zu erzielen

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>

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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
 });
 }
})

Nach dem Login kopieren

Hinweis

Der Rand und die abgerundeten Ecken der Schaltflächenkomponente werden in button: festgelegt: danach und muss zurückgesetzt werden.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Wie verwende ich Dom-Elemente in jQuery?

So implementieren Sie eine ereignisgesteuerte Fortschrittsbalkenkomponente in Vue

So implementieren Sie die Austauschmethode zweier Variablenwerte in JS

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das WeChat-Applet, um den MUI-Effekt eines digitalen Eingabefelds zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!