antd-mobile的Slider控件使用总结

最新推荐文章于 2024-08-22 15:17:14 发布

lyl0530

最新推荐文章于 2024-08-22 15:17:14 发布

阅读量2.6k

点赞数 1

分类专栏： react

本文链接：https://blog.csdn.net/lyl0530/article/details/108626221

版权

本文总结了antd-mobile的Slider组件的使用经验，包括如何自定义滑块样式，利用backgroundImage属性设置图片，以及如何实现背景颜色的分段显示，如三等分背景色，通过设置透明度来实现不同区域的颜色变化。详细讲解了linear-gradient的用法，以实现视觉上的等分效果。

摘要由CSDN通过智能技术生成

1.滑块样式

滑块样式为handleStyle，官网给的示例为圆点，若要替换为特定的图片，可使用backgroundImage属性。

其中图片要先使用require加载，然后使用ES6的新特性-模板对象，即可。

sliderBlockImg = require('../../assets/img/xxx.png');
   
<Slider
	style={
  { marginTop:'28px'}}
	value={this.windSlide?this.state.windValue:this.reportWindValue}
	step={1}
	min={0}
	max={arr.length-1}
	onChange ={e => this.onchange(e)}
	onAfterChange={(e) => this.sliderchange(e)}
	trackStyle={
  {
	  backgroundColor: 'rgba(34, 131, 226, 0)',
	  height: '12px',
	  borderRadius: '6px',
	}}
	railStyle={
  {
	  backgroundImage: windImgBg,
	  height: '12px',
	  borderRadius: '6px',
	}}
	handleStyle={
  {
	  height: '43px',
	  width: '27px',
	  backgroundImage: `url(${this.sliderBlockImg})`,
	  backgroundSize:'