微信小程序中slider实现拾色器功能

思路

画板中要实现颜色选择功能，几经周折，效果还可以，整个思路就是：
1、利用线性过渡实现slider背景渲染
2、获取slider滑块value值
3、计算该value值所代表的颜色值并赋值给颜色需求方

效果图

体验

体验路径：自定义系列>拾色器

代码

js部分

// pages/colorPicker/colorPicker.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    blockColor: "#000000",
    colorGamut:"-webkit-linear-gradient(left, #ffffff 0%, #ff0000 100%)",
    colorGray:"-webkit-linear-gradient(left, #000000 0%, #ffffff 100%)",
    colorGamutTip:"#ff0000",
    colorGrayTip:"#ffffff",
    colorValue:0,
    colorGamutValue:0,
    colorGrayValue:0,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },

  changeCorlor(e) {
    var value = e.detail.value
    var colors = []
    if (value >= 0 && value < 17) {
      colors = this.gradientColors("#ff0000", "#ffff00", 17, 2.2)
      value = value
    } else if (value >= 17 && value < 33) {
      colors = this.gradientColors("#ffff00", "#00ff00", 17, 2.2)
      value = value - 17
    } else if (value >= 33 && value < 50) {
      colors = this.gradientColors("#00ff00", "#00ffff", 17, 2.2)
      value = value - 33
    } else if (value >= 50 && value < 67) {
      colors = this.gradientColors("#00ffff", "#0000ff", 17, 2.2)
      value = value - 50
    } else if (value >= 67 && value < 83) {
      colors = this.gradientColors("#0000ff", "#ff00ff", 17, 2.2)
      value = value - 67
    } else {
      colors = this.gradientColors("#ff00ff", "#ff0000", 17, 2.2)
      value = value - 83
    }
    if (value >= colors.length) {
      value = value - 1
    }
    this.setData({
      colorValue:value,
      colorGamutTip: colors[value],
      colorGamut: "-webkit-linear-gradient(left, #ffffff 0%," + colors[value] + " 100%)"
    })

    var colorGamuts=[]
    colorGamuts = this.gradientColors("#ffffff", this.data.colorGamutTip, 100, 2.2)
    this.setData({
      colorGrayTip: colorGamuts[this.data.colorGamutValue],
      colorGray: "-webkit-linear-gradient(left, #000000 0%," + colorGamuts[this.data.colorGamutValue] + " 100%)"
    })


    var colorGrays=[]
    colorGrays = this.gradientColors("#000000",this.data.colorGrayTip,100,2.2)
    this.setData({
      blockColor:colorGrays[this.data.colorGrayValue]
    })
  },
  changeCorlorGamut(e){
    var value = e.detail.value
    var colorGamuts = []
    colorGamuts = this.gradientColors("#ffffff", this.data.colorGamutTip, 100, 2.2)
    if (value >= colorGamuts.length) {
      value = value - 1
    }
    this.setData({
      colorGamutValue:value,
      colorGrayTip: colorGamuts[value],
      colorGray: "-webkit-linear-gradient(left, #000000 0%," + colorGamuts[value] + " 100%)"
    })

    var colorGrays = []
    colorGrays = this.gradientColors("#000000", this.data.colorGrayTip, 100, 2.2)
    this.setData({
      blockColor: colorGrays[this.data.colorGrayValue]
    })
  },
  changeCorlorGray(e){
    var value = e.detail.value
    var colorGrays = []
    colorGrays = this.gradientColors("#000000", this.data.colorGrayTip, 100, 2.2)
    if (value >= colorGrays.length) {
      value = value - 1
    }
    this.setData({
      colorGrayValue:value,
      blockColor: colorGrays[value],
    })
  },
  
  parseColor: function (hexStr) {
    return hexStr.length === 4 ? hexStr.substr(1).split('').map(function (s) {
      return 0x11 * parseInt(s, 16);
    }) : [hexStr.substr(1, 2), hexStr.substr(3, 2), hexStr.substr(5, 2)].map(function (s) {
      return parseInt(s, 16);
    })
  },

  // zero-pad 1 digit to 2
  pad: function (s) {
    return (s.length === 1) ? '0' + s : s;
  },

  gradientColors: function (start, end, steps, gamma) {
    var i, j, ms, me, output = [],
      so = [];
    gamma = gamma || 1;
    var normalize = function (channel) {
      return Math.pow(channel / 255, gamma);
    };
    start = this.parseColor(start).map(normalize);
    end = this.parseColor(end).map(normalize);
    for (i = 0; i < steps; i++) {
      ms = i / (steps - 1);
      me = 1 - ms;
      for (j = 0; j < 3; j++) {
        so[j] = this.pad(Math.round(Math.pow(start[j] * me + end[j] * ms, 1 / gamma) * 255).toString(16));
      }
      output.push('#' + so.join(''));
    }
    return output;
  }
})

wxml部分

<view class="view-color-slider">
  <view style="width:160rpx;height:160rpx;border-radius:80rpx;background:{{blockColor}}"></view>
  <slider class="slider-color-picker" style="width:500rpx;height:30rpx;border-radius:10rpx;margin-left:30rpx" activeColor="transparent" backgroundColor="transparent" bindchange="changeCorlor" block-size="24" value="{{sliderValue}}"></slider>
  <slider class="slider-color-picker-gamut" style="width:500rpx;height:30rpx;border-radius:10rpx;margin-left:30rpx;background:{{colorGamut}}" activeColor="transparent" backgroundColor="transparent" bindchange="changeCorlorGamut" block-size="24" value="{{sliderValue}}"></slider>
  <slider class="slider-color-picker-gray" style="width:500rpx;height:30rpx;border-radius:10rpx;margin-left:30rpx;background:{{colorGray}}" activeColor="transparent" backgroundColor="transparent" bindchange="changeCorlorGray" block-size="24" value="{{sliderValue}}"></slider>
</view>

css部分

.view-color-slider{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.slider-color-picker{
  background: -webkit-linear-gradient(left, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
  border: 1px solid gainsboro;
}
.slider-color-picker-gamut{
  border: 1px solid gainsboro;
}
.slider-color-picker-gray{
  border: 1px solid gainsboro;
}

效果体验