微信小程序：slider滑动选择器组件实战案例

一、前言

slider是微信小程序中常用的滑动条组件，常用来实现音量调节、亮度调节、数值选择等交互。本次案例学习slider基础用法，并完成扩展需求：给第一个滑动条设置背景颜色，理解滑动事件绑定、属性配置以及数据驱动视图的开发思想。

二、实现效果说明

页面放置两个slider滑动条：

1. 第一个滑动条：自定义背景色，滑动时实时显示当前数值；
2. 第二个滑动条：基础样式slider作为对比；
   拖动滑块时触发bindchange事件，页面同步更新显示当前滑动值。

三、完整代码

1. index.wxml

<view class="container"> <view class="title">slider滑动组件演示</view> <!-- 第一个slider，扩展：设置背景颜色 backgroundColor --> <view class="item"> <text>带背景色滑动条：{{value1}}</text> <slider value="{{value1}}" min="0" max="100" step="1" bindchange="change1" backgroundColor="#87CEEB" activeColor="#0066cc"/> </view> <!-- 基础slider，用于对比 --> <view class="item"> <text>基础滑动条：{{value2}}</text> <slider value="{{value2}}" min="0" max="100" step="1" bindchange="change2"/> </view> </view>

2. index.wxss

.container{ padding: 40rpx; } .title{ font-size:34rpx; text-align:center; margin-bottom:50rpx; } .item{ margin-bottom:40rpx; } text{ display:block; margin-bottom:16rpx; font-size:28rpx; }

3. index.js

Page({ data:{ value1: 50, value2: 50 }, // 第一个滑动条回调 change1(e){ this.setData({ value1: e.detail.value }) }, // 第二个滑动条回调 change2(e){ this.setData({ value2: e.detail.value }) } })

4. index.json

{ "usingComponents": {} }

四、核心知识点讲解

slider常用属性

• value：滑块当前选中值，双向绑定数据
• min/max：最小值、最大值，默认0~100
• step：步长，每次滑动增减的数值
• backgroundColor：轨道背景色（本次作业扩展点）
• activeColor：已经划过部分的进度条颜色
• bindchange：滑动结束松开滑块时触发事件，e.detail.value获取当前数值
• bindchanging：滑动过程中实时触发（频繁触发，按需使用）

✨本次扩展需求实现：给第一个slider增加backgroundColor="#87CEEB"，修改滑动轨道底色，完成题目20分扩展要求。

五、运行步骤

1. 打开微信开发者工具，新建小程序项目；
2. 替换pages/index下4个文件的代码；
3. 点击编译，拖动两个滑块，观察数值实时变化；
4. 确认第一个滑动条背景颜色生效；
5. 将整个项目文件夹压缩打包，作为作业附件上传。

六、踩坑总结

1. bindchange是松开滑块才触发，如果想要拖动过程实时刷新，换成bindchanging；
2. 颜色值支持英文颜色名、十六进制色号；
3. slider组件宽度默认撑满父容器，可以在外层view设置width限制宽度；
4. value值必须在min和max区间内，否则会自动修正。

七、小结

slider组件是小程序基础表单类组件，上手简单。它依靠事件监听获取用户滑动产生的数值，配合数据绑定实时更新页面。在这个案例基础上，还可以拓展：滑动条控制盒子大小、控制文字透明度、多滑块联动等玩法。