feat: 首页下拉刷新

This commit is contained in:
jqtmviyu 2025-04-22 00:07:02 +08:00
parent 0660b323a5
commit 93888691f9
2 changed files with 41 additions and 5 deletions

View File

@ -1,6 +1,12 @@
<template>
<view class="carousel">
<swiper :circular="true" :autoplay="false" :interval="3000" @change="handleChange">
<swiper
:circular="true"
:autoplay="false"
:interval="3000"
:current="activeIndex"
@change="handleChange"
>
<swiper-item v-for="item in props.list" :key="item.id">
<navigator url="/pages/index/index" hover-class="none" class="navigator">
<image mode="aspectFill" class="image" :src="item.imgUrl"></image>
@ -11,7 +17,7 @@
<view class="indicator">
<text
v-for="(item, index) in props.list"
:key="item.id"
:key="item.id + index"
class="dot"
:class="{ active: index === activeIndex }"
></text>
@ -21,18 +27,25 @@
<script setup lang="ts">
import type { BannerItem } from '@/types/home'
import { ref } from 'vue'
import { ref, watch } from 'vue'
const props = defineProps<{
list: BannerItem[]
}>()
//
const activeIndex = ref(0)
//
const handleChange: UniHelper.SwiperOnChange = (e) => {
activeIndex.value = e.detail!.current
}
watch(
() => props.list,
() => {
activeIndex.value = 0
},
)
</script>
<style lang="scss">

View File

@ -3,7 +3,15 @@
<!-- 自定义导航栏 -->
<CustomNavbar />
<!-- 滚动容器 -->
<scroll-view scroll-y enable-back-to-top class="scrool-view" @scrolltolower="onScrollToLower">
<scroll-view
scroll-y
enable-back-to-top
refresher-enabled
class="scrool-view"
:refresher-triggered="isRefreshing"
@scrolltolower="onScrollToLower"
@refresherrefresh="onRefresh"
>
<!-- 轮播图 -->
<JbcSwiper :list="bannerList" />
<!-- 分类 -->
@ -55,6 +63,21 @@ const onScrollToLower = () => {
guessRef.value?.getMore()
}
//
const isRefreshing = ref(false)
const onRefresh = async () => {
isRefreshing.value = true
//
guessRef.value?.resetData()
await Promise.allSettled([
getBannerList(),
getCategoryList(),
getHotList(),
guessRef.value?.getMore(),
])
isRefreshing.value = false
}
//
onLoad(() => {
getBannerList()