bandhuBuy-uniapp/src/pages/mine/myFavorite.vue

<route lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: 'My Favorite',
    navigationBarBackgroundColor: '#fff',
  },
}
</route>

<script lang="ts" setup>
// 必须导入需要用到的页面生命周期（即使在当前页面上没有直接使用到）
// eslint-disable-next-line unused-imports/no-unused-imports
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
import { getList } from '@/api/product'

defineOptions({
  name: 'MyFavorite', // 我的收藏
})
// 获取屏幕边界到安全区域距离
const systemInfo = uni.getSystemInfoSync()
const safeAreaInsets = systemInfo.safeAreaInsets
// z-paging
const paging = ref(null)
// 类似mixins，如果是页面滚动务必要写这一行，并传入当前ref绑定的paging，注意此处是paging，而非paging.value
useZPaging(paging)

// 搜索结果
const dataList = ref([])
async function queryList(pageNo: number, pageSize: number) {
  try {
    const params = {
      page: pageNo,
      size: pageSize,
    }
    const res = await getList(params)
    paging.value.complete(res.data.list)
  }
  catch {
    paging.value.complete(false)
  }
}
</script>

<template>
  <z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList" @click="closeOutside">
    <view class="px-24rpx py-24rpx">
      <view class="grid grid-cols-2 gap-22rpx">
        <product v-for="(item, index) in dataList" :key="index" :height="340" :item="item" />
      </view>
    </view>
  </z-paging>
</template>

<style>
page {
  background: #fff;
}
</style>

<style lang="scss" scoped>
:deep() {
  .wd-navbar__title {
    margin: 0;
    max-width: 100%;
    .content {
      box-sizing: border-box;
      position: relative;
      height: 100%;
      display: flex;
      align-items: center;
      padding: 19rpx 25rpx 19rpx 0;
      .back {
        padding: 0 25rpx;
      }
      .search-input {
        flex: 1;
        height: 100%;
        text-align: left;
        background: rgba(245, 245, 245, 0.6);
        border-radius: 8rpx;
        border: 1px solid #efefef;
        font-size: 28rpx;
        padding: 16rpx 64rpx 16rpx 22rpx;
        font-weight: normal;
        &:active {
          border-color: rgba(230, 27, 40, 0.65);
        }
        &:focus-within {
          border-color: rgba(230, 27, 40, 0.65) !important;
        }
        &:focus-visible {
          border-color: rgba(230, 27, 40, 0.65) !important;
        }
      }
      .search-icon {
        position: absolute;
        right: 42rpx;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}
</style>