微信小程序Slider组件修改大小和渐变色
互联网 2022/1/20 17:13:16
微信小程序Slider组件修改大小和渐变色
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
页面<view class="body-view"><slider class="slider-light" name="upLightSlider" value=…
微信小程序Slider组件修改大小和渐变色
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
页面
<view class="body-view">
<slider class="slider-light" name="upLightSlider" value="{{upLightValue}}" bindchange="upLightChange" show-value disabled="{{upLightFlag}}" />
</view>
修改slider大小
wx-slider .wx-slider-handle-wrapper {
height: 40rpx;
}
这一段是slider的源码进行修改，操控页面所有slider组件的大小。如果单个slider组件控制大小，可以将wx-slider修改为你定义的class名字，比如我可以修改为slider-light这个class名字，就可以操控这个页面的这一个slider组件的大小。
修改slider滑块渐变色
.slider-light .wx-slider-track {
background: linear-gradient(to right, #4169E1 0%, #00FFFF 100%);
}
效果
只需要修改[.slider-light]这个class名字，改为自己的就可以使用。
现在我有个新的需求目前实现不出来好苦恼啊啊啊啊啊啊，就是将这个slider滑动的时候，背景色为渐变色保持不动。我现在能想到的解决方法是，backgroundColor和activeColor属性都设置为同样的颜色，我用十六进制的颜色码，是可以实现我的效果，但是！但是！渐变色怎么写在backgroundColor和activeColor属性里啊！！！！！好笨嘎 …
小伙伴们你们要是有解决方法，麻烦写在评论下面，谢谢可爱的小伙伴们，笔芯~
关于找一找教程网
本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。
[微信小程序Slider组件修改大小和渐变色]http://www.zyiz.net/tech/detail-287917.html
赞(0)
- 2022-05-270-STM32F407+EC200(移远4G)基本控制篇(自建物联网平台)-整体运行测试-微信小程序扫码绑定EC200,并通过MQTT实现远程通信控制
- 2022-05-27关于微信小程序工具input无法输入的问题
- 2022-05-26微信小程序的内核
- 2022-05-26微信小程序引用vant ui
- 2022-05-26如何调式小程序线上版本
- 2022-05-25微信小程序左右联动
- 2022-05-25微信小程序入门与实战-全新版
- 2022-05-25uniapp小程序使用pont
- 2022-05-24微信小程序 图片转为base64编码
- 2022-05-24微信小程序 wx:for 遍历 Map集合
