演示效果
封装的组件文章来源:https://www.toymoban.com/news/detail-842641.html
<!--
* @Author:
* @Date: 2024-03-21 19:21:58
* @LastEditTime: 2024-03-21 20:31:50
* @LastEditors: Please set LastEditors
* @Description: 消息左右滚动
-->
<template>
<div
id="textScroll"
class="text-scroll"
@mousemove="inBox"
@mouseleave="leaveBox"
>
<div
v-for="i in 2"
:id="'scrollItem' + i"
:key="'scrollItem' + i"
class="scroll-item"
:style="{ display: i === 1 ? 'flex' : 'none' }"
>
<slot></slot>
</div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
left: 0,
textScrollDiv: null,
timer: null,
scrollItemWidth: 0,
isScroll: false
};
},
computed: {},
destroyed() {
clearInterval(this.timer);
},
mounted() {
const that = this;
this.$nextTick(() => {
that.textScrollDiv = document.querySelector('#textScroll');
that.scrollItemWidth = document.querySelector('#scrollItem1').clientWidth;
const outerBoxWidth = that.textScrollDiv.clientWidth;
if (outerBoxWidth < that.scrollItemWidth) {
this.isScroll = true;
that.textScrollDiv.style.width = `${that.scrollItemWidth * 2}px`;
that.timer = setInterval(function() {
that.moveLeft();
}, 30);
document.querySelector('#scrollItem2').style.display = 'flex';
}
});
},
methods: {
moveLeft() {
if (this.textScrollDiv) {
this.left -= 1;
if (Math.abs(this.left) > this.scrollItemWidth) {
this.left = 0;
}
this.textScrollDiv.style.transform = `translate(${this.left}px, 0px)`;
}
},
// 鼠标划入区域
inBox() {
if (this.isScroll) {
clearInterval(this.timer);
this.timer = null;
}
},
// 鼠标离开区域
leaveBox() {
if (this.isScroll) {
const that = this;
this.timer = setInterval(function() {
that.moveLeft();
}, 30);
}
}
}
};
</script>
<style lang="less" scoped>
.text-scroll {
display: flex;
flex-wrap: nowrap;
transition: all 0ms ease-in 0s;
.scroll-item {
display: flex;
flex-wrap: nowrap;
}
}
</style>
外部引用文章来源地址https://www.toymoban.com/news/detail-842641.html
<template>
<!-- 公告信息板块 -->
<div v-if="noticeInfo && noticeInfo.length > 0" class="notice-plate">
<div class="plate-body">
<div class="plate-icon">
<i class="sxqyjj-iconfont sxqyjj-xiaoxi1"></i>
</div>
<div class="plate-info" @click="handleInfo($event)">
<textScroll>
<div
v-for="(item, i) in noticeInfo"
:key="'notice' + i"
class="info-item"
:data-my-id="item.id"
>
{{ item.title }}
<div v-if="i < noticeInfo.length - 1" class="line-split"></div>
</div>
</textScroll>
</div>
<div class="plate-more" @click="moreInfo">
更多
<i class="sxqyjj-iconfont sxqyjj-chevron-right"></i>
</div>
</div>
</div>
</template>
<script>
import textScroll from '@packages/views/components/text-scroll/index.vue';
export default {
name: 'Index',
components: {
textScroll
},
data() {
return {
noticeInfo: [],
};
},
created() {
this.getLastThreeConsultation();
},
methods: {
// 获取重点资讯
getLastThreeConsultation() {
this.$api['search/getLastThreeConsultation']()
.then(res => {
if (res.code === this.$constant.apiServeCode.SUCCESS_CODE) {
this.noticeInfo = res.data || [];
}
return true;
})
.catch(err => {
console.log(err);
});
}
}
}
};
</script>
<style lang="less" scoped>
/* stylelint-disable */
.notice-plate {
width: 1328px;
margin: 0 auto;
margin-top: 24px;
.plate-body {
display: flex;
align-items: flex-start;
width: 100%;
height: 48px;
padding: 10px 16px;
margin-left: -64px;
background: white;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 4px 4px 4px 4px;
.plate-icon {
width: 28px;
height: 28px;
margin-right: 16px;
line-height: 28px;
color: rgba(255, 143, 31, 1);
text-align: center;
background: rgb(255, 247, 241);
border-radius: 4px 4px 4px 4px;
}
.plate-info {
width: calc(100% - 112px);
height: 28px;
overflow: hidden;
line-height: 28px;
.info-item {
position: relative;
margin-right: 32px;
font-weight: 500;
white-space: nowrap;
&:hover {
color: rgba(0, 128, 255, 1);
cursor: pointer;
}
}
.line-split {
position: absolute;
top: 6px;
right: -16px;
width: 2px;
height: 12px;
border-right: 1px solid rgba(217, 217, 217, 1);
}
}
.plate-more {
height: 28px;
margin-left: 16px;
font-size: 14px;
line-height: 28px;
color: @text-2;
cursor: pointer;
i {
margin-left: 4px;
}
}
}
}
</style>
到了这里,关于vue 消息左右滚动(前后无缝衔接)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!