一、案例简介

本次案例是微信小程序slider滑动组件的综合练习，实现一个 RGB 调色面板。通过 4 个滑动条，分别控制红色、绿色、蓝色、透明度，拖动滑块实时修改下方预览色块的颜色。作业拓展要求：在基础调色功能之上，给第一个红色滑动条单独设置轨道背景色，区分其他滑动条。

slider组件适合用来做数值调节类交互，比如亮度、音量、参数调节，是小程序表单组件里非常常用的组件。

二、slider 核心属性说明

value 代表滑块当前数值；min 和 max 用来限定滑块的取值范围。activeColor 是滑块左侧、已经划过的轨道颜色；backgroundColor 是滑块右侧、未划过轨道的背景色，也就是本次作业拓展需要修改的属性。block-color 用来设置滑块圆点的颜色；show-value 开启后，会在滑块右侧实时展示当前数值。bindchanging 在拖动滑块的过程中持续触发，适合实时预览的场景；bindchange 只有松开滑块的时候才触发一次。

调色场景优先使用bindchanging，可以做到拖动时实时刷新预览颜色。

三、完整代码:

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