在HarmonyOS NEXT开发中Slider 设置为竖直方向，blockStyle为IMAGE，滑竿不能滑动？

Question

在HarmonyOS NEXT开发中Slider 设置为竖直方向，blockStyle为IMAGE，滑竿不能滑动？

Answer 1

Slider设置为竖直方向，blockStyle为IMAGE时Slider可以正常滑动：

@Entry 
@Component 
struct SliderExample { 
  @State vInSetValueOne: number = 40 
  @State vInSetValueTwo: number = 40 
 
  build() { 
    Column({ space: 8 }) { 
      Column() { 
        Text('vertical inset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15) 
        Row() { 
          Slider({ 
            value: this.vInSetValueOne, 
            style: SliderStyle.InSet, 
            direction: Axis.Vertical, 
            reverse: true // 竖向的Slider默认是上端是min值，下端是max值，因此想要从下往上滑动，需要设置reverse为true 
          }) 
            .blockStyle({ type: SliderBlockType.IMAGE, image: $r('sys.media.ohos_ic_public_ok') }) 
            .showTips(true) 
            .onChange((value: number, mode: SliderChangeMode) => { 
              this.vInSetValueOne = value 
              console.info('value:' + value + 'mode:' + mode.toString()) 
            }) 
          Slider({ 
            value: this.vInSetValueTwo, 
            step: 10, 
            style: SliderStyle.InSet, 
            direction: Axis.Vertical, 
            reverse: true 
          }) 
            .blockStyle({ type: SliderBlockType.IMAGE, image: $r('sys.media.ohos_app_icon') }) 
            .showSteps(true) 
            .onChange((value: number, mode: SliderChangeMode) => { 
              this.vInSetValueTwo = value 
              console.info('value:' + value + 'mode:' + mode.toString()) 
            }) 
        } 
      }.width('50%').height(300) 
    }.width('100%') 
  } 
}