大屏

Mr.Shi

2023-08-22 1e34d0773506d542ddcf914cdcaa94708167d89b

 screen_standard/src/views/index.vue

@@ -131,7 +131,7 @@
                    </div>
                    <div @mouseenter="handleMouseEnter3" @mouseleave="handleMouseLeave3" class="main_container">
                        <div ref="scrollContainer3" class="scroll_container">
                            <div v-for="(item, index) in 15" :key="item.id" :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'">
                            <div v-for="(item, index) in 6" :key="item.id" :class="index % 2 == 0 ? 'scroll_item scroll_item_bg1' : 'scroll_item scroll_item_bg2'">
                                <div class="scroll_item_row">韩伟</div>
                                <div class="scroll_item_row">电吉他</div>
                                <div class="scroll_item_row">CP003</div>
@@ -185,7 +185,9 @@
</template>

<script setup>
    import {reactive, ref, onMounted, onBeforeUnmount, onUnmounted, nextTick} from 'vue'
    import { reactive, ref, onMounted, onBeforeUnmount, onUnmounted, nextTick } from 'vue'
    import { getTop } from '@/utils/api.js'
    import { useCounterStore } from '@/stores/counter.js'

    let timer = ref(null)
    let timer1 = ref(null)
@@ -213,6 +215,11 @@
            activeBackground: 'tab_select@2x.png'
        }
    ])

    const enterprise = useCounterStore()

    console.log(enterprise.count++)

    start()
    start1()
    // start2()
@@ -235,9 +242,13 @@
    //     })
    // }
    
    // onMounted(()=> {
    //     getSensorData()
    // })
    onMounted(()=> {
        // getSensorData()
        getTop(8, 36)
            .then(res => {
                console.log(res)
            })
    })

    onBeforeUnmount(()=>{
        clearTimeout(timer.value)
@@ -332,7 +343,7 @@
        clearTimeout(timer4.value)
        // 定时器触发周期
        let speed4 = ref(25)
        timer3.value = setInterval(ListScroll4, speed4.value)
        timer4.value = setInterval(ListScroll4, speed4.value)
    }
    function ListScroll() {
        let scrollDom = scrollContainer.value
@@ -341,14 +352,14 @@
            scrollDom = scrollContainer.value
        }else {
            // 如果列表数量过少不进行滚动
            if(scrollDom.children.length < 4) {
            if(scrollDom.children.length < 8) {
                clearTimeout(timer.value)
                return
            }
            // 组件进行滚动
            scrollDom.scrollTop += 1
            // 判断是否滚动到底部
            if(scrollDom.scrollTop == (scrollDom.scrollHeight - scrollDom.clientHeight)) {
            if(scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight)) {
                // 获取组件第一个节点
                let first = scrollDom.children[0]
                // 删除节点
@@ -372,7 +383,7 @@
            // 组件进行滚动
            scrollDom.scrollTop += 1
            // 判断是否滚动到底部
            if(scrollDom.scrollTop == (scrollDom.scrollHeight - scrollDom.clientHeight)) {
            if(scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight)) {
                // 获取组件第一个节点
                let first = scrollDom.children[0]
                // 删除节点
@@ -396,7 +407,7 @@
            // 组件进行滚动
            scrollDom.scrollTop += 1
            // 判断是否滚动到底部
            if(scrollDom.scrollTop == (scrollDom.scrollHeight - scrollDom.clientHeight)) {
            if(scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight)) {
                // 获取组件第一个节点
                let first = scrollDom.children[0]
                // 删除节点
@@ -413,14 +424,14 @@
            scrollDom = scrollContainer3.value
        }else {
            // 如果列表数量过少不进行滚动
            if(scrollDom.children.length < 7) {
            if(scrollDom.children.length < 6) {
                clearTimeout(timer3.value)
                return
            }
            // 组件进行滚动
            scrollDom.scrollTop += 1
            // 判断是否滚动到底部
            if(scrollDom.scrollTop == (scrollDom.scrollHeight - scrollDom.clientHeight)) {
            if(scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight)) {
                // 获取组件第一个节点
                let first = scrollDom.children[0]
                // 删除节点
@@ -444,7 +455,7 @@
            // 组件进行滚动
            scrollDom.scrollTop += 1
            // 判断是否滚动到底部
            if(scrollDom.scrollTop == (scrollDom.scrollHeight - scrollDom.clientHeight)) {
            if(scrollDom.scrollTop >= (scrollDom.scrollHeight - scrollDom.clientHeight)) {
                // 获取组件第一个节点
                let first = scrollDom.children[0]
                // 删除节点
@@ -718,7 +729,7 @@
                            }
                            .scroll_item {
                                width: 100%;
                                height: 57px;
                                height: 58px;
                                display: flex;
                                align-items: center;
                                .scroll_item_row {
@@ -897,7 +908,7 @@
                    }
                    .main_container {
                        width: 100%;
                        height: calc(100% - 34px);
                        height: calc(100% - 33px);
                        .scroll_container {
                            width: 100%;
                            height: 100%;
@@ -910,7 +921,7 @@
                            }
                            .scroll_item {
                                width: 100%;
                                height: 36px;
                                height: 37px;
                                display: flex;
                                align-items: center;
                                .scroll_item_row {