当前位置 博文首页 > java1234的博客：微信小程序 滑动选择器 slider 组件

最大化 缩小

    java1234的博客：微信小程序 滑动选择器 slider 组件

    作者：[db:作者] 时间：2021-06-03 11:32

    完整微信小程序(Java后端) 技术贴目录清单页面（必看）

    滑动选择器。

    属性类型默认值必填说明最低版本
    minnumber0否最小值1.0.0
    maxnumber100否最大值1.0.0
    stepnumber1否步长，取值必须大于 0，并且可被(max - min)整除1.0.0
    disabledbooleanfalse否是否禁用1.0.0
    valuenumber0否当前取值1.0.0
    colorcolor#e9e9e9否背景条的颜色（请使用 backgroundColor）1.0.0
    selected-colorcolor#1aad19否已选择的颜色（请使用 activeColor）1.0.0
    activeColorcolor#1aad19否已选择的颜色1.0.0
    backgroundColorcolor#e9e9e9否背景条的颜色1.0.0
    block-sizenumber28否滑块的大小，取值范围为 12 - 281.9.0
    block-colorcolor#ffffff否滑块的颜色1.9.0
    show-valuebooleanfalse否是否显示当前 value1.0.0
    bindchangeeventhandle否完成一次拖动后触发的事件，event.detail = {value}1.0.0
    bindchangingeventhandle否拖动过程中触发的事件，event.detail = {value}1.7.0

    示例代码

    在开发者工具中预览效果

    index.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="50"/>
            </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>

    index.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)

    运行效果：

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6OVwfB12-1622438343688)(image-20210530094610826.png)]

    微信搜一搜【java1234】关注这个放荡不羁的程序员，关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。

    上一篇：java1234的博客：微信小程序 开关选择器 switch 组件
    下一篇：没有了