一、实验简介
本案例演示微信小程序slider 滑动条组件、data‑*自定义属性、rgba()颜色函数的综合使用。
通过 4 个滑动条，分别控制红、绿、蓝、透明度，实时修改下方色块的背景色与文字颜色。
作业拓展：为第一条红色滑动条设置轨道底色为黄色，滑动经过部分变为绿色。
实现效果
- 页面包含 4 个 slider 组件：红色、绿色、蓝色、透明度。
- 拖动滑块，页面下方方块背景颜色、文字颜色同步动态改变。
- 第一条滑动条原始底色黄色，滑过区域变为绿色。
- 展示两行文字：
勿以恶小而为之
勿以善小而不为
用到核心知识点：
slider表单滑动组件；data‑*自定义属性，事件中通过dataset获取自定义参数；- 事件
bindchanging：拖动滑块持续触发； - js 动态对象属性
[变量名]动态赋值； rgba(r,g,b,a)颜色：r/g/b 取值 0‑255，a 透明度 0~1；- WXML 内联样式
style数据绑定。
二、新建项目
打开微信开发者工具，新建小程序项目：
- 项目名称：
slider组件 - 后端服务：不使用云服务
- 模板选择：不使用模板
三、完整源码
1. pages/index/index.wxml
<!--index.wxml--> <scroll-view class="scrollarea" scroll-y type="list"> <view class="box"> <view class="title">滑动条和颜色</view> <text>红色滑动条</text> <!-- 作业拓展：backgroundColor底色黄色，activeColor滑过后为绿色 --> <slider>2. pages/index/index.js// index.js Page({ data: { // 设置RGB与透明度初始值 r: 50, g: 100, b: 150, a: 1 }, /** * 拖动滑块触发的回调函数 * @param {Object} e 事件对象 */ colorChanging(e) { // 获取自定义属性data‑color的值 r/g/b/a const color = e.currentTarget.dataset.color; // 获取滑块当前拖动得到的值 const value = e.detail.value; // [color]动态属性名：变量作为key，给data中对应变量赋值 this.setData({ [color]: value }) } })
重点解析：[color]: value
[color]是动态计算属性名，不是直接修改名叫 color 的变量；- 如果
color="r"，等价于r: value； - 如果
color="g"，等价于g: value。
只写一个事件函数，就可以同时处理 4 条滑动条，代码复用。
3. 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; }
4. 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; }
5. app.json
{ "pages": [ "pages/index/index" ], "window": { "navigationBarTitleText": "slider组件", "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black" }, "style": "v2", "sitemapLocation": "sitemap.json" }
四、运行步骤
- 将上述代码分别粘贴到对应文件，覆盖原有内容；
- 点击开发者工具「清除缓存」；
- 编译运行项目；
- 拖动 4 个滑动条观察效果：
- 第一条滑动条：原始底色黄色，拖动过的轨道变为绿色；
- 拖动滑块，下方方块背景颜色、文字颜色实时发生变化；
- 文字分为两行居中展示。
五、核心原理分析
- 自定义属性 data‑*
在组件标签写data‑color="r"，触发事件时，可以通过e.currentTarget.dataset.color获取r。同一个事件函数区分 4 个不同滑块。 - rgba 颜色
rgba(红,绿,蓝,透明度)，背景色直接绑定{{r}}``{{g}}``{{b}}``{{a}}；
文字颜色使用取反255‑r，保证背景和文字有对比度。 bindchanging事件
拖动滑块过程中不断触发，如果使用bindchange只有松开才触发。
六、实验总结
- slider 组件适合数值调节场景，通过
data‑*自定义属性实现事件复用，减少重复代码。 backgroundColor代表轨道原始底色；activeColor代表滑动走过的轨道颜色，二者不要搞反。- WXML 中不支持 html 的
<br>换行标签，多行文字直接嵌套<view>实现换行。 - 动态对象属性
[key]是 JS 重要语法，可以根据变量名动态修改 Page 的 data 数据。
