menduner-uniapp/pagesB/positionDetail/similar.vue

<template>
  <view>
    <view class="box defaultBgc">
      <scroll-view class="scrollBox" :scroll-y="true" :scroll-top="scrollTop" @scrolltolower="loadingMore" @scroll="onScroll" style="position:relative;">
        <PositionList :list="positionListData" :noMore="false"></PositionList>
        <uni-load-more :status="more" />
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import PositionList from '@/components/PositionList'
import { dealDictArrayData } from '@/utils/position'
import { getSimilarPosition } from '@/api/position'

const props = defineProps({
  id: String
})
const more = ref('more')
const total = ref(0)

const positionListData = ref([])
const query = reactive({
  pageSize: 10, 
  pageNo: 1,
	id: props.id
})
console.log(props.id, '==================')
const getData = async () => {
  try {
    const res = await getSimilarPosition(query)
    const arr = res?.data?.list || []
    // 推荐接口返回数据需要拼接
    const list = arr
    positionListData.value.push(...dealDictArrayData(list))
    total.value = res?.data?.total || 0
    if (positionListData.value.length === total.value) {
      more.value = 'noMore'
      return
    }
  } catch (error) {
    query.pageNo--
    more.value = 'more'
  }
}

const scrollTop = ref(0)
const old = ref({
  scrollTop: 0
})
const onScroll = (e) =>{
  old.value.scrollTop = e.detail.scrollTop
}

// 加载更多
const loadingMore = () => {
  if (total.value <= 0) return
  more.value = 'loading'
  query.pageNo++
  getData()
}

</script>

<style scoped lang="scss">
.stick {
  z-index: 1;
  position: sticky;
  top: 0;
}
.stickFilter {
  z-index: 1;
  position: sticky;
  box-shadow: 0px 10rpx 12rpx 0px rgba(195, 195, 195, .25);
  top: 120rpx;
}
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.pb-10 {
  padding-bottom: 10px;
}
.pb-20 { padding-bottom: 20px; }
.px-5 { padding-left: 5px; padding-right: 5px; }
.px-10 { padding-left: 10px; padding-right: 10px; }
.mx-10 { margin-left: 10px; margin-right: 10px }
.mx-20 { margin-left: 20px; margin-right: 20px; }
.mb-10 { margin-bottom: 10px; }
.box {
  height: 100vh;
  overflow: hidden;
  padding-bottom: 120rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.scrollBox{
  flex: 1;
  height: 0 !important;
  padding-bottom: 24rpx;
  box-sizing: border-box;
}
:deep(.uni-searchbar__box) {
  width: calc(100% - 105px);
  height: 40px !important;
  border: 1px solid #00B760;
  padding-right: 20px;
  flex: none;
}
.search-btn {
  position: absolute;
  right: 11px;
  top: 10px;
  width: 110px;
  height: 40px;
  font-size: 16px;
  background-color: #00B760;
  color: #fff;
  border-radius: 0 5px 5px 0;
  z-index: 9;
}
:deep(.picker-view) {
  padding-bottom: 80px !important;
}
</style>