- 安装插件
npm install vue-seamless-scroll --save
- 使用
<template>
<div class="scorllBox">
<div class="scrollnameList">
<p v-for="(item, index) in scorllBoxListName" :key="index">{{ item }}</p>
</div>
<div @click="handleClick($event)">
<vue-seamless-scroll :data="data"
class="seamless-warp"
:class-option="classOption"
:style="{ height: scorllHeight + 'px' }"
v-if="data.length > 0">
<ul class="sm-li"
v-for="(item, idx) in data"
:key="idx"
:style="{ color: item.state == '未处理' ? '#ffd16f' : '#ff' }">
<div class="scroll_item">
<span :data-dept="JSON.stringify(item)">{{ item.name }}</span>
<span :data-dept="JSON.stringify(item)">{{ item.time }}</span>
<span :data-dept="JSON.stringify(item)">{{ item.area }}</span>
<span class="scroll_item_state">
<span
class="scroll_item_state_text"
:data-dept="JSON.stringify(item)"
:class="{
colorOrange: !(
item.state === '已处理' || item.state === '进入小区'
)
}"
>
{{ item.state }}</span
>
</span>
</div>
</ul>
</vue-seamless-scroll>
</div>
</div>
</template>
<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
name: "ScorllBox",
components: {
vueSeamlessScroll
},
props: {
scorllBoxListName: {
default: ()=>{
return [];
}
},
scorllHeight: {
default: 180
},
scorllBoxList: {
default: ()=>{
return [];
}
}
},
computed: {
classOption () {
return {
step: 0.8,
limitMoveNum: 5,
hoverStop: true,
direction: 1,
openWatch: true,
singleHeight: 30,
singleWidth: 0,
waitTime: 1000
};
}
},
data () {
return {
data: [],
curItem: {}
};
},
watch: {
scorllBoxList: {
handler () {
this.data = [];
setTimeout(()=>{
this.data = this.scorllBoxList;
}, 500);
},
deep: true
}
},
mounted () {
this.data = this.scorllBoxList;
},
methods: {
handleClick (event) {
if(event.target.dataset.dept && JSON.stringify(this.curItem) !== event.target.dataset.dept) {
let item = JSON.parse(event.target.dataset.dept);
this.curItem = item;
this.$emit("scroll_itemClick", item);
}
}
}
};
</script>
<style lang="less" scoped>
.scorllBox {
overflow: hidden;
margin: 0 10px;
}
.seamless-warp {
width: 100%;
color: #fff;
overflow: hidden;
.scroll_item {
border-bottom: 1px solid transparent;
border-image: url("../../assets/img/home/table-border.png") 1;
display: flex;
justify-content: space-evenly;
text-align: left;
cursor: pointer;
line-height: 30px;
height: 30px;
box-sizing: border-box;
align-items: center;
span {
flex: 1;
&:first-of-type {
padding-left: 10px;
}
}
.scroll_item_state {
display: flex;
align-items: center;
padding: 0;
font-size: 12px;
.scroll_item_state_text {
border: 1px solid #4dffe4;
color: #4dffe4;
height: 18px;
line-height: 18px;
flex: 0 0 60px;
background-color: #1861617c;
text-align: center;
padding: 0;
&.colorOrange {
color: #ffd16f;
border-color: #ffd16f;
background-color: #4b3b0e9f;
}
}
}
}
}
.scrollnameList {
color: #fff;
height: 30px;
display: flex;
justify-content: space-evenly;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
border-image: url("../../assets/img/home/table-border.png") 1;
align-items: center;
p {
flex: 1;
color: #4dffe4;
font-weight: bold;
text-align: left;
&:first-of-type {
padding-left: 10px;
}
}
}
</style>