如上图:ETS开发鸿蒙 Slider的划动过程中进度是一个无限循环小数
代码如下:
@Entry
@Component
struct Index {
@State private angle: number = 0
@State private imageSize: number = 1
@State private speed: number = 5
@State private interval: number = 0
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Image ($rawfile("huaren_golden_round.png"))
.objectFit(ImageFit.Auto)
.height(150)
.width(150)
.margin({top:50, bottom:150, right:16, left:16})
.rotate({x:0, y:0, z:1, angle:this.angle})
.scale({x:this.imageSize, y:this.imageSize})
Text("速度: " + this.speed)
.margin({top: 30})
.fontSize(20)
.fontWeight(FontWeight.Bold)
Slider({
value: this.speed,
min: 1,
max: 10,
step: 1,
style: SliderStyle.OutSet
}).showTips(true)
.blockColor(Color.Gray)
.onChange((value: number, mode: SliderChangeMode) => {
// 在点击事件中赋值
console.log("vale:" + value)
this.speed = value
})
}
.width('100%')
.height('100%')
}
// 速度改变方法
private speedChange() {
var that = this
this.interval = setInterval(function(){
that.angle += that.speed
}, 16)
}
onPageShow() {
this.speedChange()
}
}
更多回帖