前言
在小程序表单开发中，slider滑块组件非常常用，可以用来调节数值、音量、亮度、颜色等。本次案例使用4个slider滑块，分别控制RGBA颜色的红、绿、蓝、透明度，实现实时调色效果；同时完成课后作业：修改第一个滑动条轨道样式，未滑动底色黄色，滑动后已走过部分为绿色，剩余轨道保持黄色。
slider组件核心属性速查表
| 属性 | 说明 |
|---|---|
max | 滑动条最大数值 |
value | 滑块当前值，支持数据绑定 |
block‑color | 滑块圆点颜色 |
active‑color | 滑块左侧已经划过的进度条颜色 |
background‑color | 滑动条底层轨道底色 |
show‑value | 是否在右侧显示当前数值 |
bindchanging | 拖动滑块过程持续触发事件 |
data‑* | 自定义属性，事件中通过dataset获取，实现一个函数处理多个滑块 |
完整代码实现
app.json
{ "pages": [ "pages/index/index" ], "window": { "navigationBarTextStyle": "black" }, "style": "v2" }pages/index/index.wxml
<!--index.wxml--> <navigation-bar title="slider 组件" back="{{false}}" color="black" background="#FFF"></navigation-bar> <scroll-view class="scrollarea" scroll-y type="list"> <view class="box"> <view class="title">滑动条和颜色</view> <text>红色滑动条</text> <!-- 作业修改：background-color黄色底层底色，active-color绿色为划过进度 --> <slider data-color="r" max="255" value="{{r}}" block-color="red" show-value="true" background-color="yellow" active-color="green" bindchanging="colorChanging" /> <text>绿色滑动条</text> <slider data-color="g" max="255" value="{{g}}" block-color="green" show-value="true" bindchanging="colorChanging" /> <text>蓝色滑动条</text> <slider data-color="b" max="255" value="{{b}}" block-color="blue" show-value="true" bindchanging="colorChanging" /> <text>透明度滑动条</text> <slider data-color="a" max="1" step="0.01" value="{{a}}" block-color="purple" show-value="true" bindchanging="colorChanging" /> <!-- rgba动态绑定背景色和文字颜色；文字使用取反色保证可读性 --> <view class="color-area" style="background-color:rgba({{r}},{{g}},{{b}},{{a}});color:rgba({{255-r}},{{255-g}},{{255-b}},{{a}})"> 勿以恶小而为之<br/>勿以善小而不为 </view> </view> </scroll-view>pages/index/index.js
// index.js Page({ data: { // RGBA初始值 r: 50, g: 100, b: 150, a: 1 }, /** * 滑块拖动持续触发 * @param {Object} e 事件对象 */ colorChanging(e) { // 获取自定义属性data‑color const color = e.currentTarget.dataset.color // 获取滑块当前拖动出来的值 const value = e.detail.value // [color]计算属性名：动态修改对应data字段 this.setData({ [color]: value }) } })pages/index/index.wxss
/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } .color-area { width: 100%; line-height: 100rpx; font-size: 60rpx; font-weight: bolder; text-align: center; padding: 40rpx 0; margin-top: 1.2em; }app.wxss（全局样式）
/**app.wxss**/ .box { margin: 20rpx; padding: 20rpx; border: 2rpx solid silver; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: red; }作业完成说明
作业需求：第一个红色滑动条，未滑动整体底色黄色；滑动之后滑块左侧（走过部分）显示绿色，滑块右侧保留黄色底色。
实现关键点，给第一个slider增加两个属性：
background-color="yellow"：整条轨道底层底色为黄色active-color="green"：滑块划过的进度条显示绿色
结语
slider滑块搭配data‑*自定义属性和计算属性名，可以极大减少重复代码，一个事件处理多个组件。本调色案例可以拓展，比如做亮度调节、音量调节等小程序功能。
