前言在小程序表单开发中slider滑块组件非常常用可以用来调节数值、音量、亮度、颜色等。本次案例使用4个slider滑块分别控制RGBA颜色的红、绿、蓝、透明度实现实时调色效果同时完成课后作业修改第一个滑动条轨道样式未滑动底色黄色滑动后已走过部分为绿色剩余轨道保持黄色。slider组件核心属性速查表属性说明max滑动条最大数值value滑块当前值支持数据绑定block‑color滑块圆点颜色active‑color滑块左侧已经划过的进度条颜色background‑color滑动条底层轨道底色show‑value是否在右侧显示当前数值bindchanging拖动滑块过程持续触发事件data‑*自定义属性事件中通过dataset获取实现一个函数处理多个滑块完整代码实现app.json{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black }, style: v2 }pages/index/index.wxml!--index.wxml-- navigation-bar titleslider 组件 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle滑动条和颜色/view text红色滑动条/text !-- 作业修改background-color黄色底层底色active-color绿色为划过进度 -- slider data-colorr max255 value{{r}} block-colorred show-valuetrue background-coloryellow active-colorgreen bindchangingcolorChanging / text绿色滑动条/text slider data-colorg max255 value{{g}} block-colorgreen show-valuetrue bindchangingcolorChanging / text蓝色滑动条/text slider data-colorb max255 value{{b}} block-colorblue show-valuetrue bindchangingcolorChanging / text透明度滑动条/text slider data-colora max1 step0.01 value{{a}} block-colorpurple show-valuetrue bindchangingcolorChanging / !-- rgba动态绑定背景色和文字颜色文字使用取反色保证可读性 -- view classcolor-area stylebackground-color:rgba({{r}},{{g}},{{b}},{{a}});color:rgba({{255-r}},{{255-g}},{{255-b}},{{a}}) 勿以恶小而为之br/勿以善小而不为 /view /view /scroll-viewpages/index/index.js// index.js Page({ data: { // RGBA初始值 r: 50, g: 100, b: 150, a: 1 }, /** * 滑块拖动持续触发 * param {Object} e 事件对象 */ colorChanging(e) { // 获取自定义属性data‑color const color e.currentTarget.dataset.color // 获取滑块当前拖动出来的值 const value e.detail.value // [color]计算属性名动态修改对应data字段 this.setData({ [color]: value }) } })pages/index/index.wxss/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } .color-area { width: 100%; line-height: 100rpx; font-size: 60rpx; font-weight: bolder; text-align: center; padding: 40rpx 0; margin-top: 1.2em; }app.wxss全局样式/**app.wxss**/ .box { margin: 20rpx; padding: 20rpx; border: 2rpx solid silver; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: red; }作业完成说明作业需求第一个红色滑动条未滑动整体底色黄色滑动之后滑块左侧走过部分显示绿色滑块右侧保留黄色底色。实现关键点给第一个slider增加两个属性background-coloryellow整条轨道底层底色为黄色active-colorgreen滑块划过的进度条显示绿色结语slider滑块搭配data‑*自定义属性和计算属性名可以极大减少重复代码一个事件处理多个组件。本调色案例可以拓展比如做亮度调节、音量调节等小程序功能。
前言在小程序表单开发中slider滑块组件非常常用可以用来调节数值、音量、亮度、颜色等。本次案例使用4个slider滑块分别控制RGBA颜色的红、绿、蓝、透明度实现实时调色效果同时完成课后作业修改第一个滑动条轨道样式未滑动底色黄色滑动后已走过部分为绿色剩余轨道保持黄色。slider组件核心属性速查表属性说明max滑动条最大数值value滑块当前值支持数据绑定block‑color滑块圆点颜色active‑color滑块左侧已经划过的进度条颜色background‑color滑动条底层轨道底色show‑value是否在右侧显示当前数值bindchanging拖动滑块过程持续触发事件data‑*自定义属性事件中通过dataset获取实现一个函数处理多个滑块完整代码实现app.json{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black }, style: v2 }pages/index/index.wxml!--index.wxml-- navigation-bar titleslider 组件 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle滑动条和颜色/view text红色滑动条/text !-- 作业修改background-color黄色底层底色active-color绿色为划过进度 -- slider data-colorr max255 value{{r}} block-colorred show-valuetrue background-coloryellow active-colorgreen bindchangingcolorChanging / text绿色滑动条/text slider data-colorg max255 value{{g}} block-colorgreen show-valuetrue bindchangingcolorChanging / text蓝色滑动条/text slider data-colorb max255 value{{b}} block-colorblue show-valuetrue bindchangingcolorChanging / text透明度滑动条/text slider data-colora max1 step0.01 value{{a}} block-colorpurple show-valuetrue bindchangingcolorChanging / !-- rgba动态绑定背景色和文字颜色文字使用取反色保证可读性 -- view classcolor-area stylebackground-color:rgba({{r}},{{g}},{{b}},{{a}});color:rgba({{255-r}},{{255-g}},{{255-b}},{{a}}) 勿以恶小而为之br/勿以善小而不为 /view /view /scroll-viewpages/index/index.js// index.js Page({ data: { // RGBA初始值 r: 50, g: 100, b: 150, a: 1 }, /** * 滑块拖动持续触发 * param {Object} e 事件对象 */ colorChanging(e) { // 获取自定义属性data‑color const color e.currentTarget.dataset.color // 获取滑块当前拖动出来的值 const value e.detail.value // [color]计算属性名动态修改对应data字段 this.setData({ [color]: value }) } })pages/index/index.wxss/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } .color-area { width: 100%; line-height: 100rpx; font-size: 60rpx; font-weight: bolder; text-align: center; padding: 40rpx 0; margin-top: 1.2em; }app.wxss全局样式/**app.wxss**/ .box { margin: 20rpx; padding: 20rpx; border: 2rpx solid silver; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: red; }作业完成说明作业需求第一个红色滑动条未滑动整体底色黄色滑动之后滑块左侧走过部分显示绿色滑块右侧保留黄色底色。实现关键点给第一个slider增加两个属性background-coloryellow整条轨道底层底色为黄色active-colorgreen滑块划过的进度条显示绿色结语slider滑块搭配data‑*自定义属性和计算属性名可以极大减少重复代码一个事件处理多个组件。本调色案例可以拓展比如做亮度调节、音量调节等小程序功能。
