一、实验简介本案例演示微信小程序slider 滑动条组件、data‑*自定义属性、rgba()颜色函数的综合使用。通过 4 个滑动条分别控制红、绿、蓝、透明度实时修改下方色块的背景色与文字颜色。作业拓展为第一条红色滑动条设置轨道底色为黄色滑动经过部分变为绿色。实现效果页面包含 4 个 slider 组件红色、绿色、蓝色、透明度。拖动滑块页面下方方块背景颜色、文字颜色同步动态改变。第一条滑动条原始底色黄色滑过区域变为绿色。展示两行文字勿以恶小而为之勿以善小而不为用到核心知识点slider表单滑动组件data‑*自定义属性事件中通过dataset获取自定义参数事件bindchanging拖动滑块持续触发js 动态对象属性[变量名]动态赋值rgba(r,g,b,a)颜色r/g/b 取值 0‑255a 透明度 0~1WXML 内联样式style数据绑定。二、新建项目打开微信开发者工具新建小程序项目项目名称slider组件后端服务不使用云服务模板选择不使用模板三、完整源码1. pages/index/index.wxml!--index.wxml-- scroll-view classscrollarea scroll-y typelist view classbox view classtitle滑动条和颜色/view text红色滑动条/text !-- 作业拓展backgroundColor底色黄色activeColor滑过后为绿色 -- slider>2. pages/index/index.js// index.js Page({ data: { // 设置RGB与透明度初始值 r: 50, g: 100, b: 150, a: 1 }, /** * 拖动滑块触发的回调函数 * param {Object} e 事件对象 */ colorChanging(e) { // 获取自定义属性data‑color的值 r/g/b/a const color e.currentTarget.dataset.color; // 获取滑块当前拖动得到的值 const value e.detail.value; // [color]动态属性名变量作为key给data中对应变量赋值 this.setData({ [color]: value }) } })重点解析[color]: value[color]是动态计算属性名不是直接修改名叫 color 的变量如果colorr等价于r: value如果colorg等价于g: value。只写一个事件函数就可以同时处理 4 条滑动条代码复用。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; padding: 40rpx 0; margin-top: 1.2em; }4. 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; }5. app.json{ pages: [ pages/index/index ], window: { navigationBarTitleText: slider组件, navigationBarBackgroundColor: #ffffff, navigationBarTextStyle: black }, style: v2, sitemapLocation: sitemap.json }四、运行步骤将上述代码分别粘贴到对应文件覆盖原有内容点击开发者工具「清除缓存」编译运行项目拖动 4 个滑动条观察效果第一条滑动条原始底色黄色拖动过的轨道变为绿色拖动滑块下方方块背景颜色、文字颜色实时发生变化文字分为两行居中展示。五、核心原理分析自定义属性 data‑*在组件标签写data‑colorr触发事件时可以通过e.currentTarget.dataset.color获取r。同一个事件函数区分 4 个不同滑块。rgba 颜色rgba(红,绿,蓝,透明度)背景色直接绑定{{r}}{{g}}{{b}}{{a}}文字颜色使用取反255‑r保证背景和文字有对比度。bindchanging事件拖动滑块过程中不断触发如果使用bindchange只有松开才触发。六、实验总结slider 组件适合数值调节场景通过data‑*自定义属性实现事件复用减少重复代码。backgroundColor代表轨道原始底色activeColor代表滑动走过的轨道颜色二者不要搞反。WXML 中不支持 html 的br换行标签多行文字直接嵌套view实现换行。动态对象属性[key]是 JS 重要语法可以根据变量名动态修改 Page 的 data 数据。
一、实验简介本案例演示微信小程序slider 滑动条组件、data‑*自定义属性、rgba()颜色函数的综合使用。通过 4 个滑动条分别控制红、绿、蓝、透明度实时修改下方色块的背景色与文字颜色。作业拓展为第一条红色滑动条设置轨道底色为黄色滑动经过部分变为绿色。实现效果页面包含 4 个 slider 组件红色、绿色、蓝色、透明度。拖动滑块页面下方方块背景颜色、文字颜色同步动态改变。第一条滑动条原始底色黄色滑过区域变为绿色。展示两行文字勿以恶小而为之勿以善小而不为用到核心知识点slider表单滑动组件data‑*自定义属性事件中通过dataset获取自定义参数事件bindchanging拖动滑块持续触发js 动态对象属性[变量名]动态赋值rgba(r,g,b,a)颜色r/g/b 取值 0‑255a 透明度 0~1WXML 内联样式style数据绑定。二、新建项目打开微信开发者工具新建小程序项目项目名称slider组件后端服务不使用云服务模板选择不使用模板三、完整源码1. pages/index/index.wxml!--index.wxml-- scroll-view classscrollarea scroll-y typelist view classbox view classtitle滑动条和颜色/view text红色滑动条/text !-- 作业拓展backgroundColor底色黄色activeColor滑过后为绿色 -- slider>2. pages/index/index.js// index.js Page({ data: { // 设置RGB与透明度初始值 r: 50, g: 100, b: 150, a: 1 }, /** * 拖动滑块触发的回调函数 * param {Object} e 事件对象 */ colorChanging(e) { // 获取自定义属性data‑color的值 r/g/b/a const color e.currentTarget.dataset.color; // 获取滑块当前拖动得到的值 const value e.detail.value; // [color]动态属性名变量作为key给data中对应变量赋值 this.setData({ [color]: value }) } })重点解析[color]: value[color]是动态计算属性名不是直接修改名叫 color 的变量如果colorr等价于r: value如果colorg等价于g: value。只写一个事件函数就可以同时处理 4 条滑动条代码复用。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; padding: 40rpx 0; margin-top: 1.2em; }4. 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; }5. app.json{ pages: [ pages/index/index ], window: { navigationBarTitleText: slider组件, navigationBarBackgroundColor: #ffffff, navigationBarTextStyle: black }, style: v2, sitemapLocation: sitemap.json }四、运行步骤将上述代码分别粘贴到对应文件覆盖原有内容点击开发者工具「清除缓存」编译运行项目拖动 4 个滑动条观察效果第一条滑动条原始底色黄色拖动过的轨道变为绿色拖动滑块下方方块背景颜色、文字颜色实时发生变化文字分为两行居中展示。五、核心原理分析自定义属性 data‑*在组件标签写data‑colorr触发事件时可以通过e.currentTarget.dataset.color获取r。同一个事件函数区分 4 个不同滑块。rgba 颜色rgba(红,绿,蓝,透明度)背景色直接绑定{{r}}{{g}}{{b}}{{a}}文字颜色使用取反255‑r保证背景和文字有对比度。bindchanging事件拖动滑块过程中不断触发如果使用bindchange只有松开才触发。六、实验总结slider 组件适合数值调节场景通过data‑*自定义属性实现事件复用减少重复代码。backgroundColor代表轨道原始底色activeColor代表滑动走过的轨道颜色二者不要搞反。WXML 中不支持 html 的br换行标签多行文字直接嵌套view实现换行。动态对象属性[key]是 JS 重要语法可以根据变量名动态修改 Page 的 data 数据。
