第2课微信开发者工具使用slider进度条标签编写rgb颜色选择功能：

最新推荐文章于 2025-06-14 15:47:21 发布

舜岳

最新推荐文章于 2025-06-14 15:47:21 发布

阅读量3.3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：微信小程序开发文章标签：微信小程序开发

本文链接：https://blog.youkuaiyun.com/qq_41614928/article/details/89607280

微信小程序开发专栏收录该内容

26 篇文章

订阅专栏

本文介绍如何在微信小程序中实现RGB颜色选择功能，通过三个滑动条分别调整红、绿、蓝三色的值，实时预览颜色变化。代码包括wxml布局和js逻辑，演示了数据绑定和事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序编写rgb颜色选择功能：

效果图如下：

在这里插入图片描述

以下是wxml文件代码：

<view class='box' style="background-color:rgb({{r}},{{g}},{{b}});width:100px;height:100px"></view>
<!-- slider滑动条标签 data-color="r"设置属性color:'r' 这样设置的属性在触发函数的e.currentTarget.dataset中 -->
<!-- value设置滚动条初始值 max设置滚动条区间0~255，bindchanging拖动过程中触发的事件changeing -->
<slider data-color="r" value='100' max="255" bindchanging='changeing'>红色</slider>
<slider data-color="g" value='200' max="255" bindchanging='changeing' >绿色</slider>
<slider data-color="b" value='255' max="255" bindchanging='changeing' >蓝色</slider>

以下是js代码：

Page({
  data: {
    r:0,
    g:0,
    b:0
  },
  changeing(e){
    console.log(e.currentTarget.dataset)//标签设置的属性在这获取
    let color = e.currentTarget.dataset.color
    let value = e.detail.value;
    this.setData({
      [color]:value
    })
  }
})