微信小程式中slider實現拾色器功能

畫板中要實現顏色選擇功能，幾經周折，效果還可以，整個思路就是：

1、利用線性過渡實現slider背景渲染

2、獲取slider滑塊value值

3、計算該value值所代表的顏色值並賦值給顏色需求方

體驗路徑：自定義系列》拾色器

js部分

// pages/colorpicker/colorpicker.js

page(,
/** * 生命週期函式--監聽頁面載入
*/onload:
function
(options)
,changecorlor
(e)else
if(value >=
17&& value <33)
else
if(value >=
33&& value <50)
else
if(value >=
50&& value <67)
else
if(value >=
67&& value <83)
else
if(value >= colors.length)
this
.setdata()
var colorgamuts=
colorgamuts =
this
.gradientcolors
("#ffffff"
,this
.data.colorgamuttip,
100,
2.2)
this
.setdata()
var colorgrays=
colorgrays =
this
.gradientcolors
("#000000"
,this
.data.colorgraytip,
100,
2.2)
this
.setdata()
},changecorlorgamut
(e)this
.setdata()
var colorgrays =
colorgrays =
this
.gradientcolors
("#000000"
,this
.data.colorgraytip,
100,
2.2)
this
.setdata()
},changecorlorgray
(e)this
.setdata()
},parsecolor:
function
(hexstr)):
[hexstr.
substr(1
,2), hexstr.
substr(3
,2), hexstr.
substr(5
,2)]
.map
(function
(s))},
// zero-pad 1 digit to 2
pad:
function
(s),
gradientcolors:
function
(start, end, steps, gamma)
; start =
this
.parsecolor
(start)
.map
(normalize)
; end =
this
.parsecolor
(end)
.map
(normalize)
;for
(i =
0; i < steps; i++
) output.
push
('#'
+ so.
join(''
));}
return output;}}
)

="view-color-slider"

>
"width:160rpx;height:160rpx;border-radius:80rpx;background:}"
>
<
/view>
="slider-color-picker" style=
"width:500rpx;height:30rpx;border-radius:10rpx;margin-left:30rpx" activecolor=
"transparent" backgroundcolor=
"transparent" bindchange=
"changecorlor" block-size=
"24" value=
"}">
<
/slider>
="slider-color-picker-gamut" style=
"width:500rpx;height:30rpx;border-radius:10rpx;margin-left:30rpx;background:}" activecolor=
"transparent" backgroundcolor=
"transparent" bindchange=
"changecorlorgamut" block-size=
"24" value=
"}">
<
/slider>
="slider-color-picker-gray" style=
"width:500rpx;height:30rpx;border-radius:10rpx;margin-left:30rpx;background:}" activecolor=
"transparent" backgroundcolor=
"transparent" bindchange=
"changecorlorgray" block-size=
"24" value=
"}">
<
/slider>
<
/view>

微信小程式 slider元件

class tui slider head 設定step,當前設定步伐為5,當前值 view class tui slider box bindchange changeslider1 step 5 value view view class tui content class tui slider...

微信小程式 slider模組 雙向滑動

這裡是改良的slider滑塊，實現雙向滑動，也是乙個 的儲存 已0點到24點的時間範圍選擇為例 這是wxml頁面 點 點 點 點 這裡是wxss頁面 buymian slide buymian title buymian slide title buymian slide slide range b...

微信小程式slider元件使用詳解

效果圖 wxml 設定step,當前設定步伐為5,當前值 是否在右側顯示當前值 設定最大值 最小值 滑動選擇器設定名稱 www.cppcns.comi fl 選擇 程式設計客棧ndchanging changeslider4 value wxss tui slider head,tui slider...