uniapp actual combat - scrollable area scroll-view (self-adaptive height, pull-down refresh)

Adaptive height

For customized top navigation bar, please refer to the blog post
https://blog.csdn.net/weixin_41192489/article/details/134852124

As can be seen in the figure, during the scrolling process of the page, the top navigation bar and bottom bar do not move, and only the middle content area can be scrolled.

• The height of the entire page is set to 100% and laid out in flex
• The height of the scrolling area, self-adaptive through flex-grow of flex layout

<template>
  <!-- 顶部--自定义的导航栏 -->
  <CustomNavbar />
  <!-- 中间--自适配高度的滚动区 -->
  <scroll-view scroll-y class="contentBox">
  <!-- 此处省略了页面内容的相关代码 -->
  </scroll-view>
</template>

<style lang="scss">
page {
      
      
  background-color: #f7f7f7;
  // 总容器高度撑满屏幕
  height: 100%;
  // 使容器内元素使用flex布局
  display: flex;
  flex-direction: column;
}
.contentBox {
      
      
  // 滚动区自适配高度
  flex-grow: 1;
}
</style>

• Note: The style here cannot be scoped

Pull down to refresh

Added on scroll-view tag

    refresher-enabled
    @refresherrefresh="onRefresherrefresh"
    :refresher-triggered="isTriggered"

New in js

// 控制下拉刷新动画的显隐
const isTriggered = ref(false)
// 自定义下拉刷新被触发
const onRefresherrefresh = async () => {
    
    
  // 开启下拉刷新动画
  isTriggered.value = true
  // 重置子组件（猜你喜欢）分页相关数据（页码重置为1，清空列表，结束标记重置为false）
  guessRef.value?.resetData()
  // 加载数据--所有接口同时开始刷新，直到耗时最长的接口返回数据
  await Promise.all([getSwiperInfo(), getCategoryInfo(), guessRef.value?.getGuessList()])
  // 关闭下拉刷新动画
  isTriggered.value = false
}