微信小程序Slider组件修改大小和渐变色
2022/1/20 17:13:16
本文主要是介绍微信小程序Slider组件修改大小和渐变色,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
微信小程序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属性里啊!!!!!好笨嘎 …
小伙伴们你们要是有解决方法,麻烦写在评论下面,谢谢可爱的小伙伴们,笔芯~
这篇关于微信小程序Slider组件修改大小和渐变色的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-07-03微信小程序分享跳转-icode9专业技术文章分享
- 2024-07-03小程序微信支付提示缺少total_fee-icode9专业技术文章分享
- 2024-07-03微信小程序携带参数分享 前后端交互流程-icode9专业技术文章分享
- 2024-07-02微信小程序中禁止左右滑动切换页面-icode9专业技术文章分享
- 2024-06-30实现小程序内部扫码签到和微信扫一扫签到-icode9专业技术文章分享
- 2024-06-30微信内调用扫码扫描小程序码如何解析链接-icode9专业技术文章分享
- 2024-06-30小程序码链接加密了如何解-icode9专业技术文章分享
- 2024-05-302024年最新版云开发cms开通步骤,开始开发微信小程序前的准备工作,认真看完奥!
- 2024-03-30微信小程序的网络设置,及网络请求:wx.request(OBJECT)
- 2024-01-22基于taro搭建小程序多项目框架