北海网站建设公司,seo关键词是什么意思,easyphp wordpress,满堂彩谁做的网站下拉刷新实际上是在用户操作下拉交互时重新调用接口#xff0c;然后将新获取的数据再次渲染到页面中。
操作步骤
基于 scroll-view 组件实现下拉刷新#xff0c;需要通过以下方式来实现下拉刷新的功能。
配置 refresher-enabled 属性#xff0c;开启下拉刷新交互监听 ref…下拉刷新实际上是在用户操作下拉交互时重新调用接口然后将新获取的数据再次渲染到页面中。
操作步骤
基于 scroll-view 组件实现下拉刷新需要通过以下方式来实现下拉刷新的功能。
配置 refresher-enabled 属性开启下拉刷新交互监听 refresherrefresh 事件判断用户是否执行了下拉操作配置 refresher-triggered 属性关闭下拉状态
首页出发下拉更新
// src/pages/index/index.vue
script setup langts
// 下拉刷新状态
const isTriggered ref(false)
// 自定义下拉刷新被触发
const onRefresherrefresh async () {// 开启动画isTriggered.value true// 重置猜你喜欢组件数据//resetData()这个方法是猜你喜欢组件的方法guessRef.value?.resetData() // 加载数据await Promise.all([getHomeBannerData(), getHomeCategoryData(), getHomeHotData()]) // 关闭动画isTriggered.value false
}
/script!-- 滚动容器 --
scroll-viewrefresher-enabledrefresherrefreshonRefresherrefresh:refresher-triggeredisTriggeredclassscroll-viewscroll-y
…省略
/scroll-view猜你喜欢组件定义重置数据的方法
// src/components/XtxGuess.vue
// 重置数据
const resetData () {pageParams.page 1guessList.value []finish.value false
}
// 暴露方法
defineExpose({resetData,
})
