鸿蒙应用开发marquee跑马灯效果实现 原创

<div class="container">
    <marquee id="marquee_lianxi" class="customMarquee" scrollamount="{{shudu}}" loop="{{loop}}"direction="{{chuchang}}" onbounce="onMarqueeBounce" onstart="onMarqueeStart" onfinish="onMarqueeFinish">{{marqueeCustomData}}</marquee>
    <div class="content">
        <button class="controlButton" onclick="you">右出</button>
        <button class="controlButton" onclick="zhuo">左出</button>
    </div>
    <marquee id="customMarquee" class="customMarquee" scrollamount="{{scrollAmount}}" loop="{{loop}}"direction="{{marqueeDir}}" onbounce="onMarqueeBounce" onstart="onMarqueeStart" onfinish="onMarqueeFinish">{{marqueeCustomData}}</marquee>
    <div class="content">
        <button class="controlButton" onclick="onStartClick">Start</button>
        <button class="controlButton" onclick="onStopClick">Stop</button>
    </div>
</div>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

.container {
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
}
.customMarquee {
    width: 100%;
    height: 80px;
    padding: 10px;
    margin: 20px;
    border: 4px solid #ff8888;
    border-radius: 20px;
    font-size: 40px;
    color: #ff8888;
    font-weight: bolder;
    font-family: serif;
    background-color: #ffdddd;
}
.content {
    flex-direction: row;
    width: 300px;
    height: 120px;
}
.controlButton {
    flex-grow: 1;
    width: 300px;
    height: 120px;
}
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.

export default {
    data: {
        scrollAmount: 20,
        loop: true,
        marqueeDir: 'left',
        marqueeCustomData: '富强、民主、文明、和谐, 自由、平等、公正、法治, 爱国、敬业、诚信、友善、',
        shudu: 30,
        chuchang : 'right',
        shudu_show:50,
    },
    onMarqueeBounce: function() {
        console.log("onMarqueeBounce");
    },
    onMarqueeStart: function() {
        console.log("onMarqueeStart");
    },
    onMarqueeFinish: function() {
        console.log("onMarqueeFinish");
    },
    onStartClick (evt) {
        this.$element('customMarquee').start();
    },
    onStopClick (evt) {
        this.$element('customMarquee').stop();
    },
    zhuo (evt) {
        this.chuchang = 'right'
    },
    you (evt) {
        this.chuchang = 'left'
    }
}
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.