小程序slider组件

wxml

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" />

<view class="container">
  <template is="head" data="{{title: 'slider'}}"/>

  <view class="page-body">
    <view class="page-section page-section-gap">
      <view class="page-section-title">设置step</view>
      <view class="body-view">
        <slider value="60" bindchange="slider2change" step="5"/>
      </view>
    </view>

    <view class="page-section page-section-gap">
      <view class="page-section-title">显示当前value</view>
      <view class="body-view">
        <slider value="50" bindchange="slider3change" show-value/>
      </view>
    </view>
    

    <view class="page-section page-section-gap">
      <view class="page-section-title">设置最小/最大值</view>
      <view class="body-view">
        <slider value="100" bindchange="slider4change" min="50" max="200" show-value/>
      </view>
    </view>
  </view>

   <view class="page-section page-section-gap">
      <view class="page-section-title">显示当前value</view>
      <view class="body-view">
        <slider value="50" bindchange="change0" show-value/>
      </view>
    </view>

  <template is="foot" />
</view>

js

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)
pageData['change0'] = function(e){
  console.log(e.detail.value)
}

wxml

<slider 
    max="100"
    step="10"
    show-value="true"
    bindchange="listenerSlider"
/>

• 1
• 2
• 3
• 4
• 5
• 6

js

Page({
  data:{
    // text:"这是一个页面"
  },

  /**
   * 监听slider
   */
  listenerSlider:function(e) {
      //获取滑动后的值
      console.log(e.detail.value);
  },

  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})