企业官网建设流程全解析

前言

slider是小程序表单组件，用于实现滑动选择。本案例利用 4 个 slider 分别控制 RGB 三原色与透明度，结合rgba()颜色函数、data‑*自定义属性、动态属性名语法，完成一个简易调色器。作业拓展需求：给第一个红色滑动条设置黄色轨道背景色，使用 slider 原生background‑color属性实现，完全匹配课件效果。

一、实现效果

1. 界面包含 4 个滑动条：红色、绿色、蓝色、透明度。
2. 拖动滑块，实时修改下方色块的背景色；文字使用互补色，背景变文字同步跟着变。
3. 拓展作业：只有红色滑动条轨道底色为黄色，其余滑动条保持默认样式。
4. 每个滑块右侧实时显示当前数值。

• R、G、B 取值范围：0‑255
• 透明度 A 取值范围：0‑1，步长0.01

二、核心知识点

1.slider 组件常用属性

表格

2.data‑* 自定义属性

写data‑color="r"，触发事件时，通过e.currentTarget.dataset.color拿到字符串"r"。 四个滑动条共用同一个事件函数，依靠自定义属性区分是修改 r/g/b/a 哪一个数据。

3.JS 动态属性名[变量名]:值

this.setData({ [color]: value })

[color]是计算属性名，不是直接设置名为 color 的字段；变量color如果是"r"，等价于r:value，实现一个函数修改 4 个不同字段。

4.rgba 颜色函数

rgba(红,绿,蓝,透明度)，四个参数全部绑定页面 data，实现颜色实时联动。 文字颜色使用互补色：rgba(255‑r,255‑g,255‑b,a)，背景越深文字越亮。

三、完整代码实现

app.json

{

"pages": [

"pages/index/index"

],

"window": {

"navigationBarTextStyle": "black",

"navigationStyle": "custom"

},

"style": "v2",

"renderer": "webview",

"rendererOptions": {

"skyline": {

"defaultDisplayBlock": true,

"defaultContentBox": true,

"tagNameStyleIsolation": "legacy",

"disableABTest": true,

"sdkVersionBegin": "3.0.0",

"sdkVersionEnd": "15.255.255"

}

},

"componentFramework": "glass-easel",

"sitemapLocation": "sitemap.json",

"lazyCodeLoading": "requiredComponents"

}

pages/index/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 data-color="r" max="255" value="{{r}}" background-color="yellow"

active-color="#04be02" block-color="red" show-value="true"

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

<view class="color-area" style="background-color: rgba({{r}}, {{g}}, {{b}},{{a}});color: rgba({{255-r}}, {{255-g}}, {{255-b}}, {{a}});">

<view>勿以恶小而为之</view>

<view>勿以善小而不为</view>

</view>

</view>

</scroll-view>

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;

}

pages/index/index.js

// index.js

Page({

data: {

// 设置颜色的初始值

r: 50,

g: 100,

b: 150,

a: 1

},

/**

* 拖动过程中触发的事件处理函数

* @param {*} e

*/

colorChanging(e) {

console.log(e);

const color = e.currentTarget.dataset.color

const value = e.detail.value

this.setData({

[color]: value

})

}

})

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;

}

四、运行测试步骤

1. 新建小程序项目，选择不使用云服务、不使用模板，粘贴全部代码。
2. 编译运行，初始状态：R=50，G=100，B=150，透明度 = 1；红色滑动条轨道底色为黄色。
3. 拖动 4 个滑动条，观察下方色块背景、文字颜色实时变化。
4. 对比效果：绿色、蓝色、透明度滑动条保持默认轨道，只有第一条是黄色轨道，完成作业拓展。

五、常见踩坑总结

1. 试图用 CSS 修改 slider 轨道底色：原生组件轨道内部 DOM 无法直接用普通 css 修改，要用组件属性background‑color。
2. 动态属性名写错：[color]:value，中括号不能丢，不要直接写color:value。
3. 拿不到dataset：事件函数内必须使用e.currentTarget.dataset，不要用e.target.dataset。
4. 透明度 slider 忘记写step="0.01"，会只能取整数 0 或 1，没有渐变效果。

六、拓展思考

1. 增加重置按钮，一键恢复颜色初始值。
2. 增加按钮，把当前 rgb 颜色值弹窗展示出来。
3. 增加预览框，实现复制颜色十六进制字符串。