<template>
<div class="main">
<div id="scrollId" class="scoll">
<div class="father" v-for="(item,index) in Data" :key='index' >
<div class="body">
<div class="Title">
<span class="icon"></span>
<span class="Text1">{{item == null ? "--" : item.diseaseName}}</span>
</div>
<div class="body_left"></div>
<div class="body_Right">
<span class="ap"
>疾病名称:{{
item == null ? "--" : item.diseaseName
}}</span
><br />
<span class="ap">1.症状:{{ item == null ? "--" :item.harmfulSymptoms }}</span
><br />
<span class="ap">2.防治方法:{{ item == null ? "--" :item.preventionMethods }}</span
><br />
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { diseaseList } from "@/api/water/disease/disease.js";
export default {
created() {
},
mounted() {
this.GetInfo();
},
data() {
return {
Data: {
scrollTimer: null, // 滚动定时器
pauseTimer: null, // 暂停定时器
scrollDirection: "down" // 滚动方向 up向上 down向下
}
};
},
destroyed() {
// 清理定时器
clearTimeout(this.pauseTimer);
this.pauseTimer = null;
clearInterval(this.scrollTimer);
this.scrollTimer = null;
// 清理点击监听
window.document.removeEventListener("click", this.pauseScroll);
},
methods: {
// 获取病虫信息
GetInfo() {
diseaseList().then(response => {
this.Data = response.rows;
}).then(() => {
this.autoScroll();
});
},
autoScroll() {
const scrollHeight = document.getElementById("scrollId").scrollHeight;
const clientHeight = document.getElementById("scrollId").clientHeight;
const scroll = scrollHeight - clientHeight;
// 滚动长度为0
if (scroll === 0) {
return;
}
// 触发滚动方法
this.scrollFun();
},
scrollFun() {
let that = this;
// 如果定时器存在
if (this.scrollTimer) {
// 则先清除
clearInterval(this.scrollTimer);
this.scrollTimer = null;
}
this.scrollTimer = setInterval(() => {
const scrollHeight = document.getElementById("scrollId")
.scrollHeight;
const clientHeight = document.getElementById("scrollId")
.clientHeight;
const scroll = scrollHeight - clientHeight;
// 获取当前滚动条距离顶部高度
const scrollTop = document.getElementById("scrollId").scrollTop;
// 向下滚动
const temp = scrollTop + 1;
document.getElementById("scrollId").scrollTop = temp; // 滚动
// 距离顶部高度 大于等于 滚动长度
if (scroll <= temp) {
// 滚动到底部 停止定时器
clearInterval(this.scrollTimer);
this.scrollTimer = null;
document.getElementById("scrollId").scrollTop = 0
// 改变方向
// 一秒后重开定时器
setTimeout(() => {
this.scrollFun();
}, 1000);
}
// 向上滚动
}, 150);
}
}
};
</script>
<style lang="scss" scoped>
.scoll::-webkit-scrollbar {
width: 5px;
}
::v-deep .scoll::-webkit-scrollbar-button {
display: none !important;
}
::v-deep .scoll::-webkit-scrollbar-thumb {
background: #00ffcb;
border-radius: 10px;
}
.main {
height: 100%;
color: white;
#scrollId {
height: 100%;
overflow-y: scroll;
}
.father {
margin-bottom: 2vh;
.body {
position: relative;
.icon {
display: inline-block;
width: 1vw;
height: 2vh;
border: 1px solid red;
background: url("../../../assets/image/home/异常报警.png");
background-size: contain;
}
.Title {
color: rgba(255, 223, 0, 1);
font-size: 1.2vmin;
margin-bottom: 2vh;
.Text1 {
position: absolute;
top: 0.3vh;
margin-left: 1vh;
}
}
.body_left {
width: 2.6vw;
height: 4.7vh;
border-radius: 10%;
position: absolute;
background: url("../../../assets/image/七星瓢虫.png");
background-size: 100% 100%;
}
.body_Right {
position: relative;
left: 20%;
width: 80%;
font-size: 1.2vmin;
line-height: 1.6vh;
}
}
}
.ap {
display: inline-block;
margin-bottom: 1vh;
}
}
</style>