uniapp实战 —— 可滚动区域 scroll-view (自适配高度,下拉刷新)

自适配高度

自定义的顶部导航栏,可参考博文
https://blog.csdn.net/weixin_41192489/article/details/134852124

如图可见,在页面滚动过程中,顶部导航栏和底栏未动,仅中间的内容区域可滚动。

  • 整个页面的高度设置为 100%,并采用 flex 布局
  • 滚动区域的高度,通过flex布局的flex-grow实现自适配
html 复制代码
<template>
  <!-- 顶部--自定义的导航栏 -->
  <CustomNavbar />
  <!-- 中间--自适配高度的滚动区 -->
  <scroll-view scroll-y class="contentBox">
  <!-- 此处省略了页面内容的相关代码 -->
  </scroll-view>
</template>
html 复制代码
<style lang="scss">
page {
  background-color: #f7f7f7;
  // 总容器高度撑满屏幕
  height: 100%;
  // 使容器内元素使用flex布局
  display: flex;
  flex-direction: column;
}
.contentBox {
  // 滚动区自适配高度
  flex-grow: 1;
}
</style>
  • 注意事项:此处样式不能加 scoped

下拉刷新

在 scroll-view 标签上新增

js 复制代码
    refresher-enabled
    @refresherrefresh="onRefresherrefresh"
    :refresher-triggered="isTriggered"

js中新增

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
}
相关推荐
y先森1 小时前
CSS3中的弹性布局之侧轴的对齐方式
前端·css·css3
new出一个对象5 小时前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
new出一个对象5 小时前
uniapp接入高德地图
uni-app
dccose6 小时前
vue3 uniapp 扫普通链接或二维码打开小程序并获取携带参数
小程序·uni-app
y先森6 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy6 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
IT女孩儿8 小时前
CSS查缺补漏(补充上一条)
前端·css
想自律的露西西★10 小时前
用el-scrollbar实现滚动条,拖动滚动条可以滚动,但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5
彪82511 小时前
第十章 JavaScript的应用 习题
javascript·css·ecmascript·html5
上优11 小时前
uniapp 选择 省市区 省市 以及 回显
大数据·elasticsearch·uni-app