feat: ✨ 首页下拉刷新
This commit is contained in:
parent
0660b323a5
commit
93888691f9
@ -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">
|
||||
|
@ -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()
|
||||
|
Loading…
x
Reference in New Issue
Block a user