微信小程序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)
关注微信小程序
程序员编程王-随时随地学编程

扫描二维码或查找【程序员编程王】

可以随时随地学编程啦!

技术文章导航 更多>