sgxt_web/src/views/home/model/strategyYp.vue

<template>

  <div class="comom-cnt" >
    <div class="zdryBox">
      <ul class="ryBox" :infinite-scroll-distance="30" ref="carouselList" @mouseenter="stopAutoScroll" @mouseleave="startAutoScroll"
        v-loading="loading" v-infinite-scroll="loadList">
        <li v-for="item in personList" :key="item.id" @click="chooseItem(item)">
          <div>{{ item.title }}</div>
          <div class="meta-info">{{ item.time }}{{ item.fbrxm }}</div>
          <div>{{ item.content }}</div>
        </li>
        <MOSTY.Empty :show="!loading && personList.length <= 0" :imgSize="100"></MOSTY.Empty>
      </ul>
      <!-- 触底加载更多数据 -->
      <div v-if="loadingMore" class="loading-more">加载中...</div>
    </div>
  </div>
</template>

<script setup>
import { tbGsxtXxltSelectPage } from '@/api/tbGsxtXxltHf'
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
import {useRouter} from 'vue-router'
import * as MOSTY from "@/components/MyComponents/index";
const router = useRouter()
const emit = defineEmits(["reversalPush"])
const reversalPush = () => {
  emit('reversalPush')
}
// 数据相关
const personList = ref([]);
const loading = ref(false);
const loadingMore = ref(false);
const total = ref(0);
const pageNum = ref(1);

// 滚动相关
const carouselList = ref(null);
const isAutoScrolling = ref(false);
let scrollTimer = null;

// 获取数据
const getList = (type) => {
  loading.value = !type ? true : false;
  loadingMore.value = !!type;
  tbGsxtXxltSelectPage({ pageSize: 10, pageCurrent: pageNum.value }).then(res => {
    loading.value = false;
    loadingMore.value = false;
    let arr = res.records || [];
    personList.value = pageNum.value == 1 ? arr : personList.value.concat(arr);
    total.value = res.total;
  }).catch(() => {
    loading.value = false;
    loadingMore.value = false;
  })
};

// 触底加载
const loadList = () => {
  if (personList.value.length == total.value || loadingMore.value) return;
  pageNum.value++;
  getList(true)
};

// 自动滚动函数
const autoScroll = () => {
  if (!carouselList.value || !isAutoScrolling.value) return;
  const container = carouselList.value;
  const speed = 1; // 滚动速度
  // 滚动容器
  container.scrollTop += speed;
  // 判断是否滚动到底部，如果是则回到顶部重新开始
  if (container.scrollTop >= container.scrollHeight - container.clientHeight - 5) {
    container.scrollTop = 0;
  }
};

// 开始自动滚动
const startAutoScroll = () => {
  if (isAutoScrolling.value || !carouselList.value) return;
  isAutoScrolling.value = true;
  // 清除可能存在的定时器
  if (scrollTimer) {
    clearInterval(scrollTimer);
  }
  // 设置新的定时器，控制滚动速度
  scrollTimer = setInterval(autoScroll, 30);
};

// 停止自动滚动
const stopAutoScroll = () => {
  isAutoScrolling.value = false;
  if (scrollTimer) {
    clearInterval(scrollTimer);
    scrollTimer = null;
  }
};

// 点击项
const chooseItem = (item) => {
  stopAutoScroll(); // 点击时停止自动滚动
  router.push({
    path: '/forumPost',
    query: { id: item.id }
  })
};

// 添加跳转
const chooseForumPost = () => {
  stopAutoScroll(); // 点击时停止自动滚动
  router.push({ path: '/forumPost' })
};

// 生命周期
onMounted(() => {
  getList();
  // 数据加载完成后启动自动滚动
  setTimeout(() => {
    if (personList.value.length > 0) {
      startAutoScroll();
    }
  }, 1000);
});

// 组件卸载前清除定时器
onBeforeUnmount(() => {
  stopAutoScroll();
});
</script>

<style>
.el-loading-mask {
  background: rgba(0, 0, 0, 0.5);
}
</style>

<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";

.loading-more {
  text-align: center;
  padding: 8px;
  color: #83bff6;
  background: rgba(0, 0, 0, 0.3);
  font-size: 12px;
}

.zdryBox {
  height: 100%;
  position: relative;
  overflow: hidden;

  .ryBox {
    height: 100%;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;

    // 隐藏滚动条但保留滚动功能
    &::-webkit-scrollbar {
      display: none;
    }
    -ms-overflow-style: none;  // IE和Edge
    scrollbar-width: none;  // Firefox

    li {
      padding: 12px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      transition: background-color 0.3s;
      cursor: pointer;
      box-sizing: border-box;

      &:hover {
        background-color: rgba(20, 107, 190, 0.2);
      }

      > div:first-child {
        font-weight: bold;
        color: #fff;
        margin-bottom: 8px;
        font-size: 14px;
        /* 标题限制1行，超出用省略号 */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .meta-info {
        text-align: right;
        color: #83bff6;
        font-size: 12px;
        margin-bottom: 8px;
      }

      > div:last-child {
        color: rgba(255, 255, 255, 0.8);
        font-size: 13px;
        line-height: 1.6;
        /* 内容限制3行，超出用省略号 */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
.switchover{
  cursor: pointer;
  font-size: 14px;
  margin-left: 20px;
  color: rgb(255, 146, 4);
}
</style>