文字向上滚动轮播淡入淡出

最新推荐文章于 2021-12-30 15:27:07 发布

原创最新推荐文章于 2021-12-30 15:27:07 发布 · 380 阅读

1 ·

CC 4.0 BY-SA版权

css 同时被 3 个专栏收录

13 篇文章

订阅专栏

weex

3 篇文章

订阅专栏

transtion

1 篇文章

订阅专栏

这个示例展示了如何在 Vue 中实现一个滚动轮播效果，利用模板语法和数据驱动更新视图。通过定时器和数组操作实现内容滚动，并通过CSS过渡效果平滑动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是我在weex里面写的，但是vue同样适用，只要把weex的text标签改成vue里面的基本标签

<template titile="模板页">
    <ac-page
        class="wrapper"
        title="模板页"
        headerMode="float"
        bgColor=""
        titleBgColor="transparent"
        :scroll="false"
    >
        <div class="fixBox" ref="fixBox">
            <div class="mesBox" :class="{marquee_top:animate}">
                <div class="zhi" :id="animate?'main'+idx:''"  v-for="(item, idx) in danmake" :key="idx">
                    <text class="text">{{ item }}</text>
                </div>
            </div>
        </div>
    </ac-page>
</template>

<script>
import PageMixin from '{BASE}/common/page-mixin';
import AcPage from '{BASE}/components/ac-page';
export default {
    name: 'template',
    mixins: [PageMixin],
    data() {
        return {
            danmake: [
                '1.滚动1',
                '2.就得京东',
                '3.对哦红豆味个还会觉得',
                '4.你的哦ID哦个很好吃很纠结',
                '5.记得',
            ],
             animate:false,
             showNum:4
        }
    },
    components: {
        AcPage
    },
    created() {
        setInterval(this.scroll, 1500)
    },
    methods: {
        scroll() {
           this.animate=true
           this.danmake.push(this.danmake[0])
          let timer= setTimeout(()=>{
               this.danmake.shift()
               this.animate=false
               clearTimeout(timer)
           },800)
        },
    },
    mounted(){
    }
}
</script>

<style>
.wrapper {
    flex: 1;
    justify-content: center;
    align-items: center;
}
.fixBox {
    width: 500px;
    height: 160px;
    overflow: hidden;
    position: relative;
    overflow: hidden;
}
.mesBox {
    position: absolute;
    top: 0;
    left:0;
}
.marquee_top {
  transition: all 1s;
  margin-top: -40px;
}
#main0{
    transition: all 0.7s;
    opacity: 0;
}
</style>