WeChat アプレット スライダーの概要

この記事では、WeChat アプレット スライダーの詳細な説明とサンプル コードを主に紹介します。必要な友人は参照してください。

実装レンダリング:

属性名

タイプデフォルト値。 説明min数値0最小最大数値100最大ステップ数値1ステップサイズ、値0 より大きく、(max - min) で割り切れる必要がありますdisabledBooleanfalse無効かどうかvalueNumber0現在の値ショー-valueBooleanfalse現在の値を表示するかどうかbindchangeEventHandleドラッグ完了後にトリガーされるイベント、event.detail = {value:value} サンプルコード:

<view class="section section_gap">
 <text class="section__title">设置left/right icon</text>
 <view class="body-view">
 <WeChat アプレット スライダーの概要 bindchange="WeChat アプレット スライダーの概要1change" left-icon="cancel" right-icon="success_no_circle"/>
 </view>
</view>

<view class="section section_gap">
 <text class="section__title">设置step</text>
 <view class="body-view">
 <WeChat アプレット スライダーの概要 bindchange="WeChat アプレット スライダーの概要2change" step="5"/>
 </view>
</view>

<view class="section section_gap">
 <text class="section__title">显示当前value</text>
 <view class="body-view">
 <WeChat アプレット スライダーの概要 bindchange="WeChat アプレット スライダーの概要3change" show-value/>
 </view>
</view>

<view class="section section_gap">
 <text class="section__title">设置最小/最大值</text>
 <view class="body-view">
 <WeChat アプレット スライダーの概要 bindchange="WeChat アプレット スライダーの概要4change" min="50" max="200" show-value/>
 </view>
</view>

var pageData = {}
for(var i = 1; i < 5; ++i) {
 (function (index) {
 pageData[`WeChat アプレット スライダーの概要${index}change`] = function(e) {
 console.log(`WeChat アプレット スライダーの概要${index}发生change事件，携带值为`, e.detail.value)
 }
 })(i);
}
Page(pageData)

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。 ！

関連する推奨事項:

WeChat アプレットのトップタブ (スワイパー) の実装の概要

YDUI で ScrollTab コンポーネントを実装するための WeChat アプレット

WeChat アプレットの使用の概要進行状況コンポーネント

以上がWeChat アプレット スライダーの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。