Slider(滑块)

最新推荐文章于 2025-02-20 09:00:00 发布

MOBX

最新推荐文章于 2025-02-20 09:00:00 发布

阅读量297

点赞数 2

文章标签：鸿蒙 Next 鸿蒙Next ArkTs

本文链接：https://blog.youkuaiyun.com/2201_75622149/article/details/143505803

版权

options:Slider 接收一个SliderOptions 类型的可选参数 option,SliderOptions 参数说明如下

value ：滑动条当前进度值。
min：设置滑动条的最小值
max：设置滑动条的最大值，默认值为100
step：设置滑动条滑动跳动值，当设置相应的step时，Slider为间歇滑动
style：设置滑动条的滑块样式
direction：设置滑动条滑动方向为水平或竖直方向
reverse：设置滑动条取值范围是否反向

Slider({
        value:this.imagewidth,
        // 最小值
        min:0,
        // 最大值
        max:100,
        // 这里是它的间隔
        step:1,
        // 互动条滑块的样式
        style:SliderStyle.InSet,
        //滑动方向为水平或竖直方向
        direction:Axis.Vertical,
        // 是否反方向
        reverse:false
      })
        .blockColor(Color.Orange) //滑块的颜色
        .trackColor(Color.Brown)  //滑轨的颜色，未滑动
        .selectedColor(Color.Green)//轨道的颜色
        .width(300)
        .height(100)
        .backgroundColor(Color.Pink)
        .showTips(true)//在下方显示进度
        .trackThickness(10)//这里是滑动条的宽度
        .onChange((value:number)=>{
          this.imagewidth=Math.floor(value);
        })