一、案例概述
本案例演示了微信小程序中slider滑动选择器组件的使用方法，通过四个滑动条分别控制红色、绿色、蓝色和透明度的值，实现滑动条与颜色区域的实时联动。功能扩展：给第一个滑动条（红色滑动条）加上了黄色的背景颜色。

实现效果：页面上显示四个滑动条，拖动任意滑动条时，下方颜色区域的背景色和文字颜色实时变化。颜色区域使用rgba颜色值，背景色为rgba(r, g, b, a)，文字颜色为反色rgba(255-r, 255-g, 255-b, a)。

二、项目结构

Plain Text

miniprogram/
├── app.js
├── app.json
├── app.wxss
├── sitemap.json
├── components/
│ └── navigation-bar/ # 自定义导航栏组件
└── pages/
└── index/
├── index.js
├── index.json
├── index.wxml
└── index.wxss
三、核心代码
3.1 index.wxml

HTML

滑动条和颜色
红色滑动条

绿色滑动条

蓝色滑动条

透明度滑动条


勿以恶小而为之
勿以善小而不为



代码解析：

四个slider组件分别通过data-color="r/g/b/a"自定义属性标识自己控制哪个颜色分量。
max="255"设置滑动条最大值为255；透明度滑动条max=“1"且step=“0.01”，步长为0.01。
value=”{{r}}"通过数据绑定显示当前值；block-color设置滑块的颜色（红/绿/蓝/紫）。
show-value="true"在滑动条右侧显示当前值；bindchanging="colorChanging"绑定拖动过程中触发的事件。
颜色区域的style通过数据绑定动态生成rgba颜色：背景色为rgba(r, g, b, a)，文字颜色取反色rgba(255-r, 255-g, 255-b, a)，保证文字在任何背景下都清晰可见。
3.2 index.js

JavaScript

// index.js
Page({
data: {
// 设置颜色的初始值
r: 50,
g: 100,
b: 150,
a: 1
},

/**

• 拖动过程中触发的事件处理函数
• @param {*} e
  */
  colorChanging(e) {
  console.log(e);
  // console.log(e.currentTarget.dataset.color);
  // console.log(e.detail.value);
  // 获取slider组件的自定义属性的值
  const color = e.currentTarget.dataset.color
  // 获取slider组件的value的值
  const value = e.detail.value
  this.setData({
  //[color] 是计算属性的用法
  // 将value值赋值给计算属性color的值
  [color]: value
  })
  // console.log(this.data.r);
  }
  })
  代码解析：

data中设置四个颜色分量的初始值：r=50、g=100、b=150、a=1，页面加载时颜色区域就显示对应的蓝灰色。
colorChanging是拖动过程中触发的事件处理函数，e.currentTarget.dataset.color获取当前滑动条的自定义属性值（即颜色分量名），e.detail.value获取滑动条的当前值。
this.setData({[color]: value})使用了计算属性的语法，[color]表示用变量color的值作为属性名，实现一个函数同时处理四个滑动条的数据更新。
拖动过程中每移动一步都会触发bindchanging事件，数据实时更新，颜色区域随之实时变化。
3.3 app.wxss

CSS

/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;
}
3.4 index.wxss

CSS

/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;
/设置上下内边距为40rpx，左右内边距为0/
padding: 40rpx 0;
/设置上边距 */
margin-top: 1.2em;
}
四、功能扩展说明
扩展要求：给第一个滑动条加上背景颜色。

在第一个滑动条（红色滑动条）上添加background-color="yellow"属性：

HTML

background-color属性设置滑动条背景轨道的颜色，添加后红色滑动条的背景轨道显示为黄色，与滑块的红色形成鲜明对比，其他三个滑动条保持默认的浅灰色背景轨道。

五、关键技术点总结
slider组件：滑动选择器，通过max、min、step、value控制取值范围和当前值。
block-color属性：设置滑块按钮的颜色。
background-color属性：设置滑动条背景轨道的颜色（功能扩展使用）。
*data-自定义属性：在组件上自定义数据，事件触发时通过e.currentTarget.dataset获取，用于区分事件来源。
bindchanging事件：拖动过程中触发的事件，拖动一步触发一次，实现实时联动。
计算属性语法：setData({[color]: value})中方括号语法可以用变量的值作为属性名，一个函数处理多个组件的数据更新。
rgba颜色：通过数据绑定动态拼接rgba颜色字符串，实现背景色与反色文字的实时联动。