支付寶小程序表單組件 滑動選擇器·Slider

滑動選擇器。

掃碼體驗

示例代碼

<!-- API-DEMO page/component/slider/slider.axml -->
<view class="page">
  <view class="page-description">滑塊</view>
  <view class="page-section">
    <view class="page-section-title">設(shè)置step</view>
    <view class="page-section-demo">
      <slider value="5" onChange="slider2change" step="5"/>
    </view>
  </view>


  <view class="page-section">
    <view class="page-section-title">設(shè)置最小/最大值范圍</view>
    <view class="page-section-demo">
      <slider value="33" onChange="slider4change" min="25" max="50" show-value/>
    </view>
  </view>


  <view class="page-section">
    <view class="page-section-title">自定義樣式</view>
    <view class="page-section-demo">
      <slider value="33" onChange="slider4change" min="25" max="50" show-value
      backgroundColor="#FFAA00" activeColor="#00aaee" trackSize="2" handleSize="6" handleColor="blue" />
    </view>
  </view>
</view>
// API-DEMO page/component/slider/slider.js
const pageData = {};


for (let i = 1; i < 5; ++i) {
  (function (index) {
    pageData['slider' + index + 'change'] = function (e) {
      console.log('slider' + index + '發(fā)生 change 事件，攜帶值為', e.detail.value);
    };
  })(i);
}
Page(pageData);

屬性