以下将展示微信小程序之表单组件slider源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。

功能描述：

滑动选择器。

属性说明：

示例代码

JAVASCRIPT：

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)

WXML：

<view class="page">

    <view class="page__hd">

        <text class="page__title">slider</text>

        <text class="page__desc">滑块</text>

    </view>

    <view class="page__bd">

        <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>

    </view>

</view>

版权声明：本站所有内容均由互联网收集整理、上传，如涉及版权问题，请联系我们第一时间处理。

原文链接地址：https://developers.weixin.qq.com/miniprogram/dev/component/slider.html