赞
踩
这是很久以前项目中用到的功能,目前要达到的效果是新闻逐条向上滚动,没有使用第三方插件,vue2版本的,vue3可以自行改造,适合新闻列表模块。后续也会出其他功能块,每个功能块都很简洁,复制粘贴就能用到项目中,节约时间
代码如下:
- <template>
- <div class="news">
- <div :class="{ anim: animate }" @mouseenter="stop()" @mouseleave="up()">
- <div
- @click="handleClick(item)"
- class="news_name"
- v-for="item in newsList"
- :key="item.id"
- >
- {{ item.name }}
- </div>
- </div>
- </div>
- </template>
- <script>
- export default {
- data() {
- return {
- timer: null,
- animate: false,
- newsList: [
- { id: 1, name: "华为11111" },
- { id: 2, name: "Redmi K30 5G" },
- { id: 3, name: "小米CC9 Pro" },
- { id: 4, name: "Redmi 8" },
- { id: 5, name: "Redmi 8A" },
- { id: 6, name: "Redmi Note8 Pro" },
- { id: 7, name: "Redmi Note8" },
- { id: 8, name: "Redmi Note8" },
- ],
- };
- },
- mounted() {
- this.scrollUp(); // 开启滚动效果
- },
- methods: {
- // 查看详情
- handleClick(item) {
- console.log(item);
- },
- // 滚动
- scrollUp() {
- this.timer = setInterval(() => {
- this.animate = true; // 向上滚动的时候需要添加动画
- setTimeout(() => {
- this.newsList.push(this.newsList[0]); // 将数组的第一个元素添加到数组最后一个
- this.newsList.shift(); // 删除数组的第一个元素
- this.animate = false;
- }, 500);
- }, 4000);
- },
- //鼠标移上去停止
- stop() {
- clearInterval(this.timer);
- },
- //鼠标离开继续
- up() {
- this.scrollUp();
- },
- },
- beforeDestroy() {
- this.stop();
- },
- };
- </script>
- <style scoped>
- .news {
- width: 100%;
- height: 90px;
- background-color: #fff;
- margin-top: 50px;
- overflow: hidden;
- }
- .news_name {
- line-height: 30px;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- transition: top 0.5s;
- }
- .anim {
- transition: all 0.5s;
- margin-top: -30px;
- }
- </style>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。