《案例4.3 slider组件》
微信小程序：slider滑动选择器组件实战案例
一、前言
slider是微信小程序中常用的滑动条组件，常用来实现音量调节、亮度调节、数值选择等交互。本次案例学习slider基础用法，并完成扩展需求：给第一个滑动条设置背景颜色，理解滑动事件绑定、属性配置以及数据驱动视图的开发思想。
二、实现效果说明
页面放置两个slider滑动条：
- 第一个滑动条：自定义背景色，滑动时实时显示当前数值；
- 第二个滑动条：基础样式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~100step：步长，每次滑动增减的数值backgroundColor：轨道背景色（本次作业扩展点）activeColor：已经划过部分的进度条颜色bindchange：滑动结束松开滑块时触发事件，e.detail.value获取当前数值bindchanging：滑动过程中实时触发（频繁触发，按需使用）
✨本次扩展需求实现：给第一个slider增加
backgroundColor="#87CEEB"，修改滑动轨道底色，完成题目20分扩展要求。
五、运行步骤
- 打开微信开发者工具，新建小程序项目；
- 替换pages/index下4个文件的代码；
- 点击编译，拖动两个滑块，观察数值实时变化；
- 确认第一个滑动条背景颜色生效；
- 将整个项目文件夹压缩打包，作为作业附件上传。
六、踩坑总结
bindchange是松开滑块才触发，如果想要拖动过程实时刷新，换成bindchanging；- 颜色值支持英文颜色名、十六进制色号；
- slider组件宽度默认撑满父容器，可以在外层view设置width限制宽度；
- value值必须在min和max区间内，否则会自动修正。
七、小结
slider组件是小程序基础表单类组件，上手简单。它依靠事件监听获取用户滑动产生的数值，配合数据绑定实时更新页面。在这个案例基础上，还可以拓展：滑动条控制盒子大小、控制文字透明度、多滑块联动等玩法。