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

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

高洛峰
高洛峰Original
2017-03-27 11:04:134235Durchsuche

Schieberegler-Komponentenbeschreibung:

Schieberegler.

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

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

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?

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

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!

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

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

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

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn