WeChat アプレット コンポーネントの詳細な説明: スライダー スライド セレクター

スライダー スライド セレクター コンポーネントの説明:

スライド セレクター。

slider スライディング セレクターのサンプル コードは次のように実行されます:

以下は WXML コードです:

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

以下は JS コードです:

var pageData = {}
for (var i = 1; i <p style="text-align: left;"> 以下は WXSS コードです: </p><pre class="brush:php;toolbar:false">.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}

slider 主な属性スライドセレクターの

属性名

タイプ

デフォルト値

説明

minNumber0 最小値
maxNumber100 最大値
stepNumber1 ステップサイズ、値は 0 より大きく、(max - min) で割り切れる必要があります
disabledBooleanfalseは無効です
valueNumber0 は現在取得されています 値
show-valueBooleanfalse は、現在の値
bindchangeEventHandle がドラッグ完了後にトリガーされるイベントであるかどうかを示します、event.detail = {value: value} 個人的な経験: min は負の数です

スライドセレクター。
minとmaxはNumber型なのでminを負の数にしても大丈夫でしょうか？

以下は WXML コードです:

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

以下は JS コードです:

var pageData = {}
for (var i = 1; i <p style="text-align: left;"> 以下は WXSS コードです: </p><pre class="brush:php;toolbar:false">.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}

分析: min は負の数に設定できることがわかります。デフォルトのスライダーは 0 の位置に表示されます (value 属性がこれを制御することを説明します)。次に、左にドラッグすると、負の数値が表示されます。

個人的な経験: min が max より大きい場合

エラーが報告されると思いましたが、結果は予想を超えていました。実際にはエラーは報告されず、最大位置まで表示され、スライダーをドラッグできなくなりました。これは明らかな大きな落とし穴です！

以下は WXML コードです:

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

以下は JS コードです:

var pageData = {}
for (var i = 1; i <p style="text-align: left;"> 以下は WXSS コードです: </p><pre class="brush:php;toolbar:false">.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}

このコントロールはおそらく後で変更されます。この落とし穴を避けてください。
さらに、最大値を最小値と等しくすることもできます。

個人的な経験: 2 つのスライダー

私は以前にスライダーを使用したことがありますが、2 つのスライダーを設定できます。この文書には書かれていないので、これは未熟としか言いようがありません。

個人的な経験: wx.showToast を使用して値を表示します

デフォルトの表示モードに加えて、トースト モードを使用して選択した値を表示することもできます
以下は WXML コードです:

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

以下はJS コード:

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

以上がWeChat アプレット コンポーネントの詳細な説明: スライダー スライド セレクターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。