 与 data-* 自定义属性)
一、前言表单组件里slider滑动条是最直观的一种连续取值控件用户拖动滑块取值在 0 到最大值之间连续变化。它常和调色类需求天然搭配——RGB 三个通道各 0255透明度 01正好是四个滑动条。本案例通过一个滑动条调色板演示三件事slider 组件的常用属性max、value、block-color、show-value、step和拖动事件 bindchangingdata-*自定义属性如何把是哪根滑动条这个信息带给事件处理函数rgba() 函数配合数据绑定实现颜色块与文字颜色的实时变化。其中[color]: value这种计算属性名的写法是用一个事件处理函数同时服务四根滑动条的关键。二、核心概念slider 组件滑动选择器。max设置最大值value设置当前取值block-color设置滑块颜色show-value显示当前值。案例用四根滑动条分别控制 r、g、bmax255和透明度 amax1、step0.01。bindchanging 事件拖动过程中连续触发的事件拖一下触发几十次页面颜色因此实时跟着变。与它相对的 bindchange 只在拖动结束松手后触发一次。data-* 自定义属性组件上以data-开头的属性事件触发时会被打包进事件对象通过e.currentTarget.dataset读取。案例给每根滑动条写了data-colorr、data-colorg……事件处理函数据此知道该把值赋给谁。e.currentTarget.dataset存放当前触发事件的组件上所有data-*属性的集合。data-colorr对应dataset.color属性名里的连字符写法如>navigation-bar titleslider 组件 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle滑动条和颜色/view text红色滑动条/text slider>// index.js Page({ data: { // 设置颜色的初始值 r: 50, g: 100, b: 150, a: 1 }, /** * 拖动过程中触发的事件处理函数 * param {*} e */ colorChanging(e) { console.log(e); // 获取slider组件的自定义属性的值 const color e.currentTarget.dataset.color // 获取slider组件的value的值 const value e.detail.value this.setData({ // [color] 是计算属性名的用法 // 将value值赋值给计算属性color的值 [color]: value }) } })3. 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; /* 设置上下内边距为40rpx左右内边距为0 */ padding: 40rpx 0; /* 设置上边距 */ margin-top: 1.2em; }4. pages/index/index.json【页面配置】{ usingComponents: { navigation-bar: /components/navigation-bar/navigation-bar } }5. 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; }6. app.json【全局配置】{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationStyle: custom }, style: v2, renderer: webview, componentFramework: glass-easel, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }五、运行效果页面顶部是自定义导航栏「slider 组件」无返回箭头。银色边框的盒子里红色标题「滑动条和颜色」下方依次是四组文字提示 滑动条红色、绿色、蓝色滑动条的取值范围都是 0255初始值分别为 50、100、150滑块本身分别是红、绿、蓝色右侧实时显示当前数值透明度滑动条紫色滑块范围 01、步长 0.01初始值为 1。第一个滑动条按作业要求加了背景色未拖过的部分是浅粉色背景条已划过的部分是红色。页面底部是一个通栏颜色块两行大字勿以恶小而为之勿以善小而不为居中显示。初始状态下颜色块是半透明蓝绿色rgba(50, 100, 150, 1)文字是它的反色。拖动任意滑动条颜色块背景、文字颜色都即时跟着变化把红色拉到 255背景明显偏红把透明度拉到 0.3整个色块变淡底下隐约透出页面底色文字颜色始终是背景色的反色视觉上始终清晰可读。六、知识点总结1、slider 的常用属性各管一件事max/min定范围step定步长value定当前值必须用数据绑定value{{r}}才能双向反映show-value在右侧显示数值block-color定滑块颜色activeColor是已划过部分的轨道色backgroundColor是未划过部分的轨道色。作业扩展用到的正是最后两个属性。2、bindchanging与bindchange的区别是本案例的灵魂bindchanging 在拖动过程中连续触发所以颜色是渐变的bindchange 只在松手后触发一次颜色会跳变。如果两个都不写拖动条数值变了但 data 不更新颜色块纹丝不动。3、data-colorr这种 data-* 属性是给组件贴标签的标准做法。事件触发时标签进入e.currentTarget.dataset处理函数据此区分是哪根滑动条。注意 dataset 里的值都是字符串本例 r 是字符串无所谓但 data-value10 拿到的是 10做算术前要 Number()。4、this.setData({ [color]: value })里的方括号是 ES2015 计算属性名color 是变量[color]取它的值当属性名。写成color: value就错了——那会新增一个叫 color 的属性r、g、b 永远不变。这一行等价于对 r/g/b/a 各写一遍 if-else是一个函数服务多个同类组件的通用技巧。5、rgba() 的四个参数全部来自数据绑定rgba({{r}}, {{g}}, {{b}}, {{a}})。WXML 插值表达式里可以做简单算术所以反色写成rgba({{255-r}}, {{255-g}}, {{255-b}}, {{a}})——只反转色相、保留透明度。能这样做是因为插值支持简单表达式但复杂逻辑仍应放 JS 里算好再绑定。6、透明度滑动条必须写step0.01。slider 默认 step 是 1max1 时拖一下只有 0 和 1 两个取值rgba 的第四个参数也就只有全透和全不透。步长必须能整除最大值否则滑块会停在半步上show-value 显示的值也不规整。7、本案例有一个隐蔽的缺陷只绑了 bindchanging没绑 bindchange。直接点击轨道某处而不是拖动时bindchanging 不触发滑块跳到新位置但 data 里的值还是旧的颜色块和滑块位置就对不上了。严谨写法是两个事件都绑同一个处理函数bindchangingcolorChanging bindchangecolorChanging拖动时连续更新、点击时一次性更新互不冲突。8、页面初始值的合法性r/g/b 初始 50/100/150 在 0255 内a 初始 1 在 01 内且都是 step 的整数倍。slider 的 value 超出 max/min 时不会报错会被钳制在边界但 data 与视图会失同步——初始值应始终落在 [min, max] 且为 step 的整数倍。9、.color-area用line-height: 100rpx配合两行 view 实现行距用padding: 40rpx 0撑起上下留白。margin-top: 1.2em是相对单位em 相对当前元素 font-size60rpx所以 1.2em 实际是 72rpx——字号改了间距自动跟着变这比写死 rpx 更抗调整。10、四根滑动条共用一个事件处理函数的前提是行为一致只有目标不同。如果四根条需要不同行为比如透明度变化时另存历史就不要共用或者至少给 data-* 换成更结构化的标签。复用是手段不是目的。七、拓展思考调色板只是 slider 最直观的应用。真实项目里它无处不在视频播放器的进度条和音量条配合 bindchange 拖完再 seek避免拖一下请求一次、图片编辑器的饱和度/亮度调节、任务设置里的提醒时间选择、直播间美颜磨皮强度等。共同点都是在连续区间里选一个值并且几乎都要回答同一个问题——用 bindchanging 还是 bindchange追求实时调色、滤镜预览选前者并接受高频 setData追求性能发请求、写存储选后者或两者配合过程给预览、松手才提交。data-* 自定义属性的用途也远不止区分滑动条列表项上挂 data-id 点击后跳详情、tab 上挂 data-index 切换面板、上传组件上挂 data-type 区分文件类别本质都是把业务数据随组件带给事件。当 data-* 开始承载复杂结构时就该升级成真正的自定义组件用 properties 传参了——这也是从会用组件到会设计组件的分水岭。
一、前言表单组件里slider滑动条是最直观的一种连续取值控件用户拖动滑块取值在 0 到最大值之间连续变化。它常和调色类需求天然搭配——RGB 三个通道各 0255透明度 01正好是四个滑动条。本案例通过一个滑动条调色板演示三件事slider 组件的常用属性max、value、block-color、show-value、step和拖动事件 bindchangingdata-*自定义属性如何把是哪根滑动条这个信息带给事件处理函数rgba() 函数配合数据绑定实现颜色块与文字颜色的实时变化。其中[color]: value这种计算属性名的写法是用一个事件处理函数同时服务四根滑动条的关键。二、核心概念slider 组件滑动选择器。max设置最大值value设置当前取值block-color设置滑块颜色show-value显示当前值。案例用四根滑动条分别控制 r、g、bmax255和透明度 amax1、step0.01。bindchanging 事件拖动过程中连续触发的事件拖一下触发几十次页面颜色因此实时跟着变。与它相对的 bindchange 只在拖动结束松手后触发一次。data-* 自定义属性组件上以data-开头的属性事件触发时会被打包进事件对象通过e.currentTarget.dataset读取。案例给每根滑动条写了data-colorr、data-colorg……事件处理函数据此知道该把值赋给谁。e.currentTarget.dataset存放当前触发事件的组件上所有data-*属性的集合。data-colorr对应dataset.color属性名里的连字符写法如>navigation-bar titleslider 组件 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle滑动条和颜色/view text红色滑动条/text slider>// index.js Page({ data: { // 设置颜色的初始值 r: 50, g: 100, b: 150, a: 1 }, /** * 拖动过程中触发的事件处理函数 * param {*} e */ colorChanging(e) { console.log(e); // 获取slider组件的自定义属性的值 const color e.currentTarget.dataset.color // 获取slider组件的value的值 const value e.detail.value this.setData({ // [color] 是计算属性名的用法 // 将value值赋值给计算属性color的值 [color]: value }) } })3. 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; /* 设置上下内边距为40rpx左右内边距为0 */ padding: 40rpx 0; /* 设置上边距 */ margin-top: 1.2em; }4. pages/index/index.json【页面配置】{ usingComponents: { navigation-bar: /components/navigation-bar/navigation-bar } }5. 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; }6. app.json【全局配置】{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationStyle: custom }, style: v2, renderer: webview, componentFramework: glass-easel, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }五、运行效果页面顶部是自定义导航栏「slider 组件」无返回箭头。银色边框的盒子里红色标题「滑动条和颜色」下方依次是四组文字提示 滑动条红色、绿色、蓝色滑动条的取值范围都是 0255初始值分别为 50、100、150滑块本身分别是红、绿、蓝色右侧实时显示当前数值透明度滑动条紫色滑块范围 01、步长 0.01初始值为 1。第一个滑动条按作业要求加了背景色未拖过的部分是浅粉色背景条已划过的部分是红色。页面底部是一个通栏颜色块两行大字勿以恶小而为之勿以善小而不为居中显示。初始状态下颜色块是半透明蓝绿色rgba(50, 100, 150, 1)文字是它的反色。拖动任意滑动条颜色块背景、文字颜色都即时跟着变化把红色拉到 255背景明显偏红把透明度拉到 0.3整个色块变淡底下隐约透出页面底色文字颜色始终是背景色的反色视觉上始终清晰可读。六、知识点总结1、slider 的常用属性各管一件事max/min定范围step定步长value定当前值必须用数据绑定value{{r}}才能双向反映show-value在右侧显示数值block-color定滑块颜色activeColor是已划过部分的轨道色backgroundColor是未划过部分的轨道色。作业扩展用到的正是最后两个属性。2、bindchanging与bindchange的区别是本案例的灵魂bindchanging 在拖动过程中连续触发所以颜色是渐变的bindchange 只在松手后触发一次颜色会跳变。如果两个都不写拖动条数值变了但 data 不更新颜色块纹丝不动。3、data-colorr这种 data-* 属性是给组件贴标签的标准做法。事件触发时标签进入e.currentTarget.dataset处理函数据此区分是哪根滑动条。注意 dataset 里的值都是字符串本例 r 是字符串无所谓但 data-value10 拿到的是 10做算术前要 Number()。4、this.setData({ [color]: value })里的方括号是 ES2015 计算属性名color 是变量[color]取它的值当属性名。写成color: value就错了——那会新增一个叫 color 的属性r、g、b 永远不变。这一行等价于对 r/g/b/a 各写一遍 if-else是一个函数服务多个同类组件的通用技巧。5、rgba() 的四个参数全部来自数据绑定rgba({{r}}, {{g}}, {{b}}, {{a}})。WXML 插值表达式里可以做简单算术所以反色写成rgba({{255-r}}, {{255-g}}, {{255-b}}, {{a}})——只反转色相、保留透明度。能这样做是因为插值支持简单表达式但复杂逻辑仍应放 JS 里算好再绑定。6、透明度滑动条必须写step0.01。slider 默认 step 是 1max1 时拖一下只有 0 和 1 两个取值rgba 的第四个参数也就只有全透和全不透。步长必须能整除最大值否则滑块会停在半步上show-value 显示的值也不规整。7、本案例有一个隐蔽的缺陷只绑了 bindchanging没绑 bindchange。直接点击轨道某处而不是拖动时bindchanging 不触发滑块跳到新位置但 data 里的值还是旧的颜色块和滑块位置就对不上了。严谨写法是两个事件都绑同一个处理函数bindchangingcolorChanging bindchangecolorChanging拖动时连续更新、点击时一次性更新互不冲突。8、页面初始值的合法性r/g/b 初始 50/100/150 在 0255 内a 初始 1 在 01 内且都是 step 的整数倍。slider 的 value 超出 max/min 时不会报错会被钳制在边界但 data 与视图会失同步——初始值应始终落在 [min, max] 且为 step 的整数倍。9、.color-area用line-height: 100rpx配合两行 view 实现行距用padding: 40rpx 0撑起上下留白。margin-top: 1.2em是相对单位em 相对当前元素 font-size60rpx所以 1.2em 实际是 72rpx——字号改了间距自动跟着变这比写死 rpx 更抗调整。10、四根滑动条共用一个事件处理函数的前提是行为一致只有目标不同。如果四根条需要不同行为比如透明度变化时另存历史就不要共用或者至少给 data-* 换成更结构化的标签。复用是手段不是目的。七、拓展思考调色板只是 slider 最直观的应用。真实项目里它无处不在视频播放器的进度条和音量条配合 bindchange 拖完再 seek避免拖一下请求一次、图片编辑器的饱和度/亮度调节、任务设置里的提醒时间选择、直播间美颜磨皮强度等。共同点都是在连续区间里选一个值并且几乎都要回答同一个问题——用 bindchanging 还是 bindchange追求实时调色、滤镜预览选前者并接受高频 setData追求性能发请求、写存储选后者或两者配合过程给预览、松手才提交。data-* 自定义属性的用途也远不止区分滑动条列表项上挂 data-id 点击后跳详情、tab 上挂 data-index 切换面板、上传组件上挂 data-type 区分文件类别本质都是把业务数据随组件带给事件。当 data-* 开始承载复杂结构时就该升级成真正的自定义组件用 properties 传参了——这也是从会用组件到会设计组件的分水岭。
