历史记录添加滚动分页

liudong

2024-08-20 fe2d4623b7ad5ce6e9706125e1f33581ea8b03f0

历史记录添加滚动分页

 src/views/sessionManager/components/historySession.vue

@@ -22,9 +22,11 @@
                class="left-list"
                style="
                  height: calc(100vh - 160px);
                  overflow-y: auto;
                  overflow-y: scroll;
                  overflow-x: hidden;
                "
                v-if="isReached"
                @scroll="handleScroll"
              >
                <div class="historyTitle___F_iam">历史会话</div>

@@ -116,6 +118,15 @@
const scrollRef = ref(null);
const httpUrl = localStorage.getItem('httpUrl');
const imgSrc = ref(logo);
let scrollTopVal = ref(0);
let queryPage = reactive({
  page: 1,
  page_size: 50
})
let total = ref(0);
let sessionScrollList = ref([]);
let isReached = ref(true);

const DialogList = async () => {
  const { code, data } = await getDialogListApi();
  if (code === 200) {
@@ -167,8 +178,7 @@
const querySessionList = async (id) => {
  const { code, data } = await sessionListApiPage({
    dialog_id: id,
    page: 1,
    page_size: 100
    ...queryPage
  });
  if (code === 200) {
    sessionList.value = data.map((item) => {
@@ -177,7 +187,7 @@
        showtype: 1
      }
    });

    // total.value = sessionList.value.length;


  } else {
@@ -247,25 +257,53 @@


const handleScroll = async (e: any) => {
  // scrollTopVal.value = e.target.scrollTop
  // let offsetHeight = e.target.offsetHeight
  // let scrollHeight = e.target.scrollHeight
  //
  // if (scrollTopVal.value + offsetHeight >= scrollHeight) {
  //   //滚动条到达底部
  //   if (cardData.value.length < total.value) {
  //     //数据为加载完，继续赋值
  //     serarchData.pageNum++
  //
  //
  //
  //   }
  // }
}
  scrollTopVal.value = e.target.scrollTop;
  let offsetHeight = e.target.offsetHeight;
  let scrollHeight = e.target.scrollHeight;

const loading: any = computed(() => {
  // cardData.value.length >= total.value
})
  if (scrollTopVal.value + offsetHeight >= scrollHeight-1) {
    console.log(scrollTopVal.value);
    // console.log(offsetHeight);
    // console.log(scrollHeight);
    //滚动条到达底部
    // if (sessionList.value.length < total.value) {
    //   //数据为加载完，继续赋值
    //   // queryPage.page++
    //
    //
    //
    // }
    queryPage.page++
    const { code, data } = await sessionListApiPage({
      dialog_id: '',
      ...queryPage
    });
    if (code === 200) {
       sessionScrollList.value = data.map((item) => {
        return {
          ...item,
          showtype: 1
        }
      });
      // total.value = sessionList.value.length;
      sessionList.value = [...sessionList.value,...sessionScrollList.value];
      isReached.value = false;
      setTimeout(()=>{
        isReached.value = true;
        nextTick(()=>{
          scrollRef.value.scrollTop(scrollTopVal.value);
          console.log(scrollRef.value.$el.scrollTop,'scrollTopVal');
          console.log(scrollTopVal.value,'scrollTopVal');
        })
      },100)


    } else {
      Message.warning("查询失败");
    }

  }
}



@@ -281,20 +319,13 @@
    querySessionList('');

  });
  // 添加滚动事件监听器
  scrollRef.value.$el.addEventListener('scroll', handleScroll);

//   给元素添加滚动事件监听
//   if (scrollRef.value) {
//     // 给元素添加滚动监听器
//
//     scrollRef.value.addEventListener('scroll', handleScroll, true)
//
//     // 如果你需要在组件卸载时移除监听器，可以返回一个清理函数
//     return () => {
//       scrollRef.value.removeEventListener('scroll', handleScroll, true)
//     }
//   }


  // 清理函数
  return () => {
    scrollRef.value.$el.removeEventListener('scroll', handleScroll);
  };