微信小程序組件slider

表單組件slider：官方文檔

 

Demo Code:

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

<view class="section section_gap">
  <text class="section__title">設置left/right icon</text>
  <view class="body-view">
    <slider bindchange="slider1change" 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">
    <slider bindchange="slider2change" step="5"/>
  </view>
</view>

<view class="section section_gap">
  <text class="section__title">顯示當前value</text>
  <view class="body-view">
    <slider bindchange="slider3change" show-value/>
  </view>
</view>

<view class="section section_gap">
  <text class="section__title">設置最小/最大值</text>
  <view class="body-view">
    <slider bindchange="slider4change" min="50" max="200" show-value/>
  </view>
</view>

.section__title{
    font-family: "Helvetica Neue","Hiragino Sans GB","Microsoft YaHei","\9ED1\4F53",Arial,sans-serif;
}
.section_gap{
    margin-top: 30px;
}

Tip:

left-icon  right-icon在開發工具中並沒有效果 ，官方定義的屬性也沒有這兩項。

也許在真實環境中有效果。2016·10·17