1、案例描述

通过滑动条移动改变展示区rgba颜色

2、实现过程

2.1、代码展示

• wxml

<!--pages/kj/demo111-template/index.wxml-->
<view class="box">
  <view class="title">滑动条改变颜色</view>
  <text>红色滑动条</text>
  <slider max="255" step="1" value="50" show-value="true" bindchange="change1" block-color="red"></slider>

  <text>绿色滑动条</text>
  <slider max="255" step="1" value="50" show-value="true" bindchange="change2" block-color="green"></slider>

  <text>蓝色滑动条</text>
  <slider max="255" step="1" value="50" show-value="true" bindchange="change3" block-color="blue"></slider>
  
  <text>透明度滑动条</text>
  <slider max="1" step="0.01" value="0.5" show-value="true" bindchange="change4" block-color="purple"></slider> 
  <view class="export" style="background-color: rgba({{r}},{{g}},{{b}},{{a}});"></view> 
</view>

• wxss

/* pages/kj/demo111-template/index.wxss */
.export{
    height : 100px;
    width: auto;
}

• js

// pages/kj/demo111-template/index.js

var r = 0;
var g = 0;
var b = 0;
var a = 0;
var list = [];
Page({

  data: {
    r : r,
    g : g,
    b : b,
    a : a
  },
  change1: function(e){ 
    this.setData({
      r : e.detail.value
    })
    console.log(e.detail.value)
  },
  change2: function(e){ 
    this.setData({
      g : e.detail.value
    })
  },
  change3: function(e){ 
    this.setData({
      b : e.detail.value
    })
  },
  change4: function(e){ 
    this.setData({
      a : e.detail.value
    })
  },
  
})

2.2、结果展示

结果展示.jpg

3、知识汇总

知识要点.jpg
slider组件
续表

4、踩坑说明!

• 定义变量除了使用“var”，也可以使用“let”。

• 关于使用公共属性data-*的说明，在本案例中使用该属性，可以简化js当中的代码量

  
  wxml

js

这里需要了解，每个colorChanging获取的color都是从wxml当中传递过来的data-color，在colorChanging中[color]意味着是动态数组中的值，代表的无非是传递“r,g,b,a”当中的某个变量名。这个坑，还有个问题，那就是公共属性data-*的具体使用说明文档。

在wxml文件一个标签中，bind一个事件，然后写上 data-*，这个 * 是自己定义的名称，则，在js文件的bind事件中，传入 e(event)，则：
函数中调用格式："e(event).currentTarget.dataset.定义的data-后的名字"
则为data-携带要传的数据，其中，currentTarget是你当前点击的对象，dataset就是你自定义属性的集合，例如在这里就是 data-index = "{{index}}"。

组件的公共属性data.png