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

微信小程序编写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
    })
  }
})

复制粘贴以下代码就ok啦！

效果一样哦！