小程序slider组件

朴灿烈づ我的快乐病毒、 2022-05-30 03:07 262阅读 0赞

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>

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

*  1
 *  2
 *  3
 *  4
 *  5
 *  6

Page({
      data:{
        // text:"这是一个页面"
      },
    
      /** * 监听slider */
      listenerSlider:function(e) { 
          //获取滑动后的值
          console.log(e.detail.value);
      },
    
      onLoad:function(options){ 
        // 页面初始化 options为页面跳转所带来的参数
      },
      onReady:function(){ 
        // 页面渲染完成
      },
      onShow:function(){ 
        // 页面显示
      },
      onHide:function(){ 
        // 页面隐藏
      },
      onUnload:function(){ 
        // 页面关闭
      }
    })