ホームページ > 記事 > ウェブフロントエンド > WeChatアプレットでスライダーコンポーネントを使用する方法
この記事では主に WeChat アプレットのスライダー コンポーネントの使用方法を詳しく紹介します。興味のある方は参考にしてください。参考として、具体的な内容は次のとおりです
Rendering
WXML
<view class="tui-content"> <view class="tui-slider-head">设置step,当前设置步伐为5,当前值:{{slider1}}</view> <view class="tui-slider-box"> <slider bindchange="changeSlider1" step="5" value="{{slider1}}"/> </view> </view> <view class="tui-content"> <view class="tui-slider-head">是否在右侧显示当前值</view> <view class="tui-slider-box"> <slider bindchange="changeSlider2" value="{{slider2}}" show-value/> </view> </view> <view class="tui-content"> <view class="tui-slider-head">设置最大值、最小值</view> <view class="tui-slider-box"> <slider bindchange="changeSlider3" min="20" max="90" value="{{slider3}}" show-value/> </view> </view> <view class="tui-content"> <view class="tui-slider-head">滑动选择器设置名称</view> <view class="tui-slider-box"> <view class="tui-fl"> 选择 </view> <view class="tui-fl"> {{slider4}} </view> <view style="overflow:hidden"> <slider bindchanging="changeSlider4" value="{{slider4}}"/> </view> </view> </view>
WXSS
.tui-slider-head,.tui-slider-box{ height: 80rpx; line-height: 80rpx; font-size: 35rpx; color: #666; }
JS
Page({ data: { slider1: 50, slider2: 50, slider3: 50, slider4: 50 }, changeSlider1(e) { this.setData({ slider1: e.detail.value }) }, changeSlider2(e){ this.setData({ slider2: e.detail.value}) }, changeSlider3(e) { this.setData({ slider3: e.detail.value }) }, changeSlider4(e) { this.setData({ slider4: e.detail.value }) } })
注: スライダー コンポーネントには 2 つのイベントがあります。bindchanging はドラッグ プロセス中にトリガーされ、bindchange はドラッグトリガーが完了するとトリガーされます。
上記は私があなたのためにまとめたものです。
関連記事:
vue.jsを使用して選択した変更メソッドを実装する方法vueでクリックイベントがバブリングしないようにする方法Vue.js ボタンをクリックしてコンテンツを表示/非表示にします以上がWeChatアプレットでスライダーコンポーネントを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。