SliderJS（鸿蒙Demo）_slider.js

---

功能介绍

实现功能：使用滑动条，控制风车的速度和大小。
组件：image、text、slider。
效果如下：

---

页面基本构成

按照JS的风格，页面、样式、数据，分成了三个页面。

• index.css
• index.hml
• index.js

页面分成上下两个部分，Previewer展示效果

代码

index.hml

页面结构：hml文件

<div class="container">
    <div class='image-block'>
        <image id="windmill"
               src="{{ imageUrl }}"
               style="animation-duration : {{ animationDuration }}; transform : scale({{ imageScale }});">
        </image>
    </div>
    <div class='slider-block'>
        <text font-size="30fp">
            速度：{{ speed }}
        </text>
        <slider class="slider"
                min="1"
                max="10"
                value="{{ speed }}"
                onchange="changeSpeed">
        </slider>
        <text>
            缩放比例：{{ imageScale }}
        </text>
        <slider class="slider"
                min="0.5"
                max="2.5"
                step="0.1"
                value="{{ imageScale }}"
                onchange="changeScale">
        </slider>
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

index.css

页面样式：css文件

.container {
    flex-direction: column;
}

.image-block {
    width: 100%;
    height: 50%;
    justify-content: center;
    align-items: center;
}

.slider-block {
    width: 100%;
    height: 50%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#windmill {
    width: 200px;
    height: 200px;
    animation-name: GO;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes GO {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

index.js

页面数据和事件：js文件

export default {
    data: {
        imageUrl: "/common/images/windmill.png",
        animationDuration: '5000ms',
        imageScale: 1,
        speed: 5
    },
    changeSpeed(e) {
        if (e.mode === 'end' || e.mode === 'click') {
            this.speed = e.value
            const animationDurationNum = 10000 - e.value * 999
            this.animationDuration = animationDurationNum + 'ms'
        }
    },
    changeScale(e) {
        if (e.mode === 'end' || e.mode === 'click') {
            this.imageScale = e.value
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

PS

imageUrl: "/common/images/windmill.png"
1

这个存放图片的文件夹，是自己建的，可以自定义。