123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106 |
- <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>
|