Ausführliche Erklärung der WeChat-Applet-Komponenten: Schieberegler

Schieberegler-Komponentenbeschreibung:

Schieberegler.

Der Beispielcode für den Schieberegler für den Schieberegler läuft wie folgt:

Das Folgende ist der WXML-Code:

<view>
  <text>设置left/right icon</text>
  <view>
    <slider></slider>
  </view>
</view>
<view>
  <text>设置step</text>
  <view>
    <slider></slider>
  </view>
</view>
<view>
  <text>显示当前value</text>
  <view>
    <slider></slider>
  </view>
</view>
<view>
  <text>设置最小/最大值</text>
  <view>
    <slider></slider>
  </view>
</view>

Das Folgende ist der JS-Code:

var pageData = {}
for (var i = 1; i <p style="text-align: left;">Das Folgende ist der WXSS-Code: </p><pre class="brush:php;toolbar:false">.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}

Die Hauptattribute des Slider-Sliding-Selektors

Attributname

Typ

Standardwert

Beschreibung

minNumber0 Mindestwert
maxNumber100 Maximalwert
stepNumber1 Schrittgröße, der Wert muss größer als 0 und teilbar sein von (max - min)
Ob „disabledBooleanfalse“ deaktiviert ist
Der aktuelle Wert von valueNumber0
Ob „show-valueBooleanfalse“ den aktuellen Wert anzeigt
bindchangeEventHandle ist ein Ereignis, das nach Abschluss eines Drag-Vorgangs ausgelöst wird, event.detail = { Wert: Wert}Persönliche Erfahrung: min ist negativ

Schieberegler.
Da „Min“ und „Max“ Zahlentypen sind, ist es in Ordnung, „Min“ auf eine negative Zahl zu setzen?

Das Folgende ist der WXML-Code:

<view>
  <text>设置最小/最大值</text>
  <view>
    <slider></slider>
  </view>
</view>

Das Folgende ist der JS-Code:

var pageData = {}
for (var i = 1; i <p style="text-align: left;">Das Folgende ist der WXSS-Code: </p><pre class="brush:php;toolbar:false">.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}

Analyse: Sie können sehen, dass min auf eine negative Zahl gesetzt werden kann und der Standardschieberegler bei 0 angezeigt wird (was darauf hinweist, dass das Wertattribut dies steuert). Dann können Sie nach links ziehen und die negative Zahl wird angezeigt.

Persönliche Erfahrung: Wenn min größer als max ist

Ich dachte, es würde ein Fehler gemeldet, aber das Ergebnis war übertrieben meine erwartung. Es wurde tatsächlich kein Fehler gemeldet, und dann wurde es in der maximalen Position angezeigt und der Schieberegler konnte nicht gezogen werden. Das ist offensichtlich eine große Grube!

Das Folgende ist der WXML-Code:

<view>
  <text>设置最小/最大值</text>
  <view>
    <slider></slider>
  </view>
</view>

Das Folgende ist der JS-Code:

var pageData = {}
for (var i = 1; i <p style="text-align: left;">Das Folgende ist der WXSS-Code: </p><pre class="brush:php;toolbar:false">.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}

Dieses Steuerelement wird wahrscheinlich später geändert. Bitte vermeiden Sie diese Falle.
Darüber hinaus kann max auch gleich min sein.

Persönliche Erfahrung: zwei Schieberegler

Ich habe den Schieberegler schon einmal verwendet, und Sie können zwei Schieberegler einrichten. Es steht nicht in diesem Dokument, und das reicht mir, ich kann nur sagen, dass es unausgereift ist.

Persönliche Erfahrung: Verwenden Sie wx.showToast, um den Wert anzuzeigen

Zusätzlich zur Standardanzeigemethode können wir auch den Toastmodus verwenden, um den ausgewählten Wert anzuzeigen
unten ist der WXML-Code:

<view>
  <text>使用toast显示当前value</text>
  <view>
    <slider></slider>
  </view>
</view>

Das Folgende ist der JS-Code:

var pageData = {}
for (var i = 1; i <p style="text-align: left;">Das Folgende ist der WXSS-Code:</p><pre class="brush:php;toolbar:false">.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung der WeChat-Applet-Komponenten: Schieberegler. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!