百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

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

yuyutoo 2024-10-12 00:22 5 浏览 0 评论

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)

相关推荐

ETCD 故障恢复(etc常见故障)

概述Kubernetes集群外部ETCD节点故障,导致kube-apiserver无法启动。...

在Ubuntu 16.04 LTS服务器上安装FreeRADIUS和Daloradius的方法

FreeRADIUS为AAARadiusLinux下开源解决方案,DaloRadius为图形化web管理工具。...

如何排查服务器被黑客入侵的迹象(黑客 抓取服务器数据)

---排查服务器是否被黑客入侵需要系统性地检查多个关键点,以下是一份详细的排查指南,包含具体命令、工具和应对策略:---###**一、快速初步检查**####1.**检查异常登录记录**...

使用 Fail Ban 日志分析 SSH 攻击行为

通过分析`fail2ban`日志可以识别和应对SSH暴力破解等攻击行为。以下是详细的操作流程和关键分析方法:---###**一、Fail2ban日志位置**Fail2ban的日志路径因系统配置...

《5 个实用技巧,提升你的服务器安全性,避免被黑客盯上!》

服务器的安全性至关重要,特别是在如今网络攻击频繁的情况下。如果你的服务器存在漏洞,黑客可能会利用这些漏洞进行攻击,甚至窃取数据。今天我们就来聊聊5个实用技巧,帮助你提升服务器的安全性,让你的系统更...

聊聊Spring AI Alibaba的YuQueDocumentReader

序本文主要研究一下SpringAIAlibaba的YuQueDocumentReaderYuQueDocumentReader...

Mac Docker环境,利用Canal实现MySQL同步ES

Canal的使用使用docker环境安装mysql、canal、elasticsearch,基于binlog利用canal实现mysql的数据同步到elasticsearch中,并在springboo...

RustDesk:开源远程控制工具的技术架构与全场景部署实战

一、开源远程控制领域的革新者1.1行业痛点与解决方案...

长安汽车一代CS75Plus2020款安装高德地图7.5

不用破解原车机,一代CS75Plus2020款,安装车机版高德地图7.5,有红绿灯读秒!废话不多讲,安装步骤如下:一、在拨号状态输入:在电话拨号界面,输入:*#518200#*(进入安卓设置界面,...

Zookeeper使用详解之常见操作篇(zookeeper ui)

一、Zookeeper的数据结构对于ZooKeeper而言,其存储结构类似于文件系统,也是一个树形目录服务,并通过Key-Value键值对的形式进行数据存储。其中,Key由斜线间隔的路径元素构成。对...

zk源码—4.会话的实现原理一(会话层的基本功能是什么)

大纲1.创建会话...

Zookeeper 可观测性最佳实践(zookeeper能够确保)

Zookeeper介绍ZooKeeper是一个开源的分布式协调服务,用于管理和协调分布式系统中的节点。它提供了一种高效、可靠的方式来解决分布式系统中的常见问题,如数据同步、配置管理、命名服务和集群...

服务器密码错误被锁定怎么解决(服务器密码错几次锁)

#服务器密码错误被锁定解决方案当服务器因多次密码错误导致账户被锁定时,可以按照以下步骤进行排查和解决:##一、确认锁定状态###1.检查账户锁定状态(Linux)```bash#查看账户锁定...

zk基础—4.zk实现分布式功能(分布式zk的使用)

大纲1.zk实现数据发布订阅...

《死神魂魄觉醒》卡死问题终极解决方案:从原理到实战的深度解析

在《死神魂魄觉醒》的斩魄刀交锋中,游戏卡死犹如突现的虚圈屏障,阻断玩家与尸魂界的连接。本文将从技术架构、解决方案、预防策略三个维度,深度剖析卡死问题的成因与应对之策,助力玩家突破次元壁障,畅享灵魂共鸣...

取消回复欢迎 发表评论: