当前位置：网站首页>Summer Challenge harmonyos - slider slider for custom components

Summer Challenge harmonyos - slider slider for custom components

2022-07-25 07:36:00 【51CTO】

author ： Fan lele

This article is participating in the starlight project 3.0– Summer Challenge

Preface

Studying recently HarmonyOS Develop relevant knowledge , Useful in the project development process slider Slider as , This paper mainly combines with HarmonyOS Relevant components on the official website and general API, Achieve one slider Slider as .

Effect demonstration

# Summer Challenge # HarmonyOS - Custom component slider slider _slider slider

Realization principle

1. The trigger condition

be based on HarmonyOS General events touchstart and touchmove, Trigger when your finger just touches the screen 、 The event is triggered when the finger moves after touching the screen ;

2. Realization slider Slider effect

adopt touches Set of attributes when touching an event , Return the information array of touch points on the screen , Get localX Horizontal distance from the upper left corner of the touched component , Dynamically calculate the width of sub elements to achieve slider Slider effect .

3. Achieve percentage display

adopt HarmonyOS Common methods getBoundingClientRect() Get the width of the element itself ; Remove the width of the element itself by sliding distance , To achieve the percentage of slider movement ;

The official used API

Common methods

getBoundingClientRect()

Get the size of the element and its position relative to the window .

attribute	type	describe
width	number	The width of this element .
height	number	The height of this element .
left	number	The offset of the left edge of the element from the window .
top	number	The offset of the upper boundary of this element from the window .

General events

name	Parameters	describe	Whether it supports bubbling
touchstart	TouchEvent	This event is triggered when the finger just touches the screen .	yes 5+
touchmove	TouchEvent	This event is triggered when the finger moves after touching the screen .	yes 5+

attribute	type	explain
touches	Array<TouchInfo>	Set of attributes when touching an event , An array of information containing touch points on the screen .

attribute	type	explain
globalX	number	From the top left corner of the screen （ The status bar is not included ） Lateral distance . The top left corner of the screen is the origin .
globalY	number	From the top left corner of the screen （ The status bar is not included ） Longitudinal distance . The top left corner of the screen is the origin .
localX	number	Horizontal distance from the upper left corner of the touched component . The upper left corner of the component is the origin .
localY	number	The longitudinal distance from the upper left corner of the touched component . The upper left corner of the component is the origin .

Implementation process

hml part ：

    <div class="slider-wrapper">
        <div class="progressBox">
            <text>
                <span>{{progress}}%</span>
            </text>
        </div>
        <div class="content">
            <div id="slider" @touchstart="boxChoose" @touchmove="boxChoose" style="width: 300px;">
                <div class="slider-main" style="width: {{ width }}"></div>
            </div>
            <div class="dot" style ="left : {{dotLeft}}"></div>
        </div>
        <div class="progress" >
            <text for="{{ (index,item) in stepArr }}">
                {{item}}
            </text>
        </div>
       
    </div>


     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

css part ：

.slider-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: bisque;
}
.progressBox{
    margin-top:50px ;
    display: flex;
    justify-content: center;
    align-items: center;
}
.content{
    width: 300px;
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    margin-top: 50px;
}

#slider {
    width: 300px;
    height: 15px;
    background-color: pink;
    display: flex;
    justify-content: center;
}
.slider-main {
    background-color: aqua;
    width: 0;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.dot {
    border-radius: 50px;
    width: 25px;
    height: 25px;
    background-color: #fff;
    border: 1px solid #409eff;
    position: absolute;
    top: -5px;

}

.progress{
    width: 300px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 20px;
}

     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.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.

js part ： By dynamically changing child elements width Width to achieve slider Slider effect ; To Xiao Yuan dot Set absolute positioning relative to its parent element , Through dynamic change left The value of causes the circle to move , Handle element width The width of is assigned to the variable dotLeft, You can achieve the effect that the small circle moves with the slider .

export default {
    data: {
        progress:0,// percentage 
        width: 0,
        step1: 1,// step 
        stepArr:[0,20,40,60,80,100],
        dotLeft:-10
    },
    boxChoose(e) {

        let box = this.$element('slider')

        let width = e.touches[0].localX //  Get the position to the left of the container when clicking 
        this.dotLeft = width
        let elementWidth = box.getBoundingClientRect().width -10 // Width of element  -  Offset of small circle 
        //  The critical value of the offset of the small circle 
        if ( this.dotLeft >= elementWidth ) {
            this.dotLeft = elementWidth
        }
        if ( this.dotLeft <= -10 ) {
            this.dotLeft = -10
        }
        let compare = elementWidth / (100 / this.step1) //  Calculate the width of each step according to the step 
        this.width = Math.ceil(width / compare) * compare
        this.progress = Math.round(this.width / elementWidth *100)

        // Limit the critical value 
        if(this.progress >= 100){
            this.progress = 100
        };
        if(this.progress <= 0){
            this.progress = 0
        }
    },
}

     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.

summary

This article is my study of Hongmeng animation API One of the exercises , It is also a commonly used component , The following functions need to be improved , For example, in the style 、 Functions, etc , I hope I can learn more about Hongmeng with you , Progress together .

For more original content, please pay attention to ： China soft International HarmonyOS Technical team

Beginner to master 、 Skills to cases , Systematic sharing HarmonyOS Development technology , Welcome to contribute and subscribe , Let's move forward hand in hand to build Hongmeng ecology .

Want to know more about open source , Please visit ：

51CTO Open source basic software community

https://ost.51cto.com/#bkwz

原网站

版权声明
本文为[51CTO]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/201/202207191526521785.html