uniapp中scroll-view局部滚动的各种场景

简介: 可滚动视图区域,用于区域滚动。使用竖向滚动时,需要给 scroll-view 一个固定高度,通过 css 设置 height;使用横向滚动时,需要给 scroll-view 添加 white-space: nowrap; 样式

uni 文档中 scroll-view 说明

可滚动视图区域,用于区域滚动。使用竖向滚动时,需要给 scroll-view 一个固定高度,通过 css 设置 height;使用横向滚动时,需要给 scroll-view 添加 white-space: nowrap; 样式。

微信小程序文档中 scroll-view 说明

可滚动视图区域。使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。

场景一:布局中已知高度局部滚动

一般页面布局中某个模块需要局部滚动,以横向滚动更多,纵向滚动其实也类似。这个也是 scroll-view 最简单的用法,纵向滚动直接设置一个已知的固定高度 height 就行了,没啥难度。

场景二:整个布局上、中、下3个模块布局,中间局部滚动

常见整个页面布局,需要中间部分直接自适应屏幕然后局部滚动。这个实现稍微难一点:

js 实现:直接获取到屏幕的整个高度,然后减去上下模块的高度就是中间的 scroll-view 高度了。

// 获取屏幕可用高度
let screenHeight = uni.getSystemInfoSync().windowHeight

css 实现:外层盒子直接 flex 布局,主轴改为 column 纵向,然后中间部分在 scroll-view 标签外面再套一个div,这个div 的 flex 设为 1 自动设置高度,然后 scroll-view 的 height 设为 100%。不过注意最外层的盒子一定要是已知高度的,像整个页面这种其实也是已知高度,否则无效。

<template>
  <div class="page">
    <div class="top" />
    <div class="center">
      <scroll-view style="height: 100%;"></scroll-view>
    </div>
    <div class="bottom" />
  </div>
<template>
<style>
.page {
  display: flex;
  flex-direction: column;
}

.top {
  height: 100px;
  background: green;
}

.bottom {
  height: 100px;
  background: red;
}

.center {
  flex: 1;
}
</style>

场景三:未知高度局部滚动

这个就有点难度了,其实就是我们 pc 上常用的设置最大高度 max-height,如果超过了最大高度则出现滚动条,很不幸在小程序这种方式滚动不了。

一般用在弹窗中比较多,设置一个固定高度确实可以实现,但是内容较少时会出现大量留白,用纯 css 我是没找到实现方式,因为需要动态获取到内容的高度才知道要给 scroll-view 设置多高。

<template>
  <div class="pop">
    <div class="header">我是标题</div>
    <scroll-view :style="'height:' + height + 'px'">
      <div id="scroll-content"></div>
    </scroll-view>
    <div class="footer">确定</div>
  </div>
<template>
<script>
export default {
  data() {
    return {
      height: 200 // 默认滚动高度
    }
  },
  mounted() {
    // 实际弹窗中应该是在弹窗显示时去计算高度,此处仅作示例,获取不到节点信息可以放到 $nextTick 中去获取
    this.calcHeight()
  },
  methods: {
    calcHeight() {
      const query = uni.createSelectorQuery().in(this)
      query.select('#scroll-content').boundingClientRect(res => {
        const h = res ? res.height : 0
        let height = this.height
        if (h > 0 && h <= this.height) {
          // 感觉获取到的 res.height 和实际的有大约 39px 误差,所以自己减去一点
          height = (h > 19) ? (h - 19) : h
        }

        this.height = height
      }).exec()
    }
  }
}
</script>

注意 createSelectorQuery 在自定义组件中要加上 in(this)

相关文章
|
2月前
|
Web App开发 小程序 Android开发
uniapp TC-scroll-view 横向和纵向滚动 带滚动回调
uniapp TC-scroll-view 横向和纵向滚动 带滚动回调
74 0
|
10月前
|
移动开发 小程序
小程序-uniapp:URL Link / 适用于在移动端 从短信、邮件、微信外网页 等场景打开小程序任意页面
小程序-uniapp:URL Link / 适用于在移动端 从短信、邮件、微信外网页 等场景打开小程序任意页面
375 0
|
11月前
uniapp遮罩层穿透问题,uview遮罩层组件,uview的actionSheet组件.鼠标穿透,uview组件u-popup遮罩滚动穿透问题
uniapp遮罩层穿透问题,uview遮罩层组件,uview的actionSheet组件.鼠标穿透,uview组件u-popup遮罩滚动穿透问题
294 0
|
11月前
|
容器
UniApp scroll-view 事件不生效(@scroll、@scrolltolower、@scrolltoupper ...)
UniApp scroll-view 事件不生效(@scroll、@scrolltolower、@scrolltoupper ...)
1041 0
|
2月前
|
开发框架 监控 物联网
【Uniapp 专栏】探索 Uniapp 开发的更高级应用场景
【5月更文挑战第17天】Uniapp作为跨平台开发框架,在物联网、实时数据监控、企业级应用、地理定位和教育、电商领域展现出广泛应用潜力。通过蓝牙连接智能家居,实时展示数据变化,构建复杂业务流程,定位服务及互动学习平台,它提供了创新解决方案。随着技术发展,Uniapp将继续为开发者创造更多机遇和挑战,推动移动应用领域的前进。
【Uniapp 专栏】探索 Uniapp 开发的更高级应用场景
|
13天前
uniapp实战 —— 猜你喜欢(含滚动触底分页加载)
uniapp实战 —— 猜你喜欢(含滚动触底分页加载)
13 3
|
13天前
uniapp实战 —— 可滚动区域 scroll-view (自适配高度,下拉刷新)
uniapp实战 —— 可滚动区域 scroll-view (自适配高度,下拉刷新)
57 0
|
2月前
|
Android开发 UED 开发者
【Uniapp 专栏】比较 Uniapp 与原生开发的差异与适用场景
【5月更文挑战第15天】UniApp与原生开发各有千秋。UniApp以高效跨平台著称,一套代码覆盖多平台,降低开发成本,适合快速开发简单应用。原生开发则提供优秀性能和用户体验,适合对性能要求高的复杂应用。两者在功能实现和维护上各有优势,开发者需根据项目需求权衡选择。随着技术进步,两者都在不断优化,为移动应用开发带来新机遇。
【Uniapp 专栏】比较 Uniapp 与原生开发的差异与适用场景
|
2月前
|
移动开发 小程序 API
uniapp中uview组件库丰富的CountTo 数字滚动使用方法
uniapp中uview组件库丰富的CountTo 数字滚动使用方法
37 2
|
2月前
|
移动开发 小程序 API
uniapp中uview组件库的NoticeBar 滚动通知 使用方法
uniapp中uview组件库的NoticeBar 滚动通知 使用方法
111 1

热门文章

最新文章