uView Sticky 吸顶

简介: uView Sticky 吸顶

该组件与CSS中position: sticky属性实现的效果一致,当组件达到预设的到顶部距离时, 就会固定在指定位置,组件位置大于预设的顶部距离时,会重新按照正常的布局排列。

#平台差异说明

App(vue) App(nvue) H5 小程序

说明

本组件内部通过多种手段嗅探当前运行环境是否支持css sticky,在H5APP-VUENVUEMP-WEIIXN安卓 等环境可以进行准确判断,如果支持则使用CSS方案,否则使用降级的JS方案。

#基本使用

由于css sticky的特殊性,建议您将此组件放置在页面外层元素中,否则可能会导致sticky失效,以下为MDN对sticky的解释 (opens new window)

  • 元素根据正常文档流进行定位,然后相对它的最近滚动祖先(nearest scrolling ancestor)和 containing block (最近块级祖先 nearest block-level ancestor),包括table-related元素,基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。
<template>
  <view class="container">
    <!-- 建议放在外层 -->
    <u-sticky>......</u-sticky>
    <view class="container__inner">
      <!-- 不建议放在层层嵌套的view中,除非您清楚知道自己为什么需要这么做 -->
      <u-sticky>......</u-sticky>
    </view>
  </view>
</template>

copy

#吸顶距离

通过offset-top参数设置组件在吸顶时与顶部的距离

<u-sticky offset-top="200">
  <text>塞下秋来风景异,衡阳雁去无留意</text>
</u-sticky>
相关文章
|
8月前
|
前端开发 API 开发者
一键抠图有多强?19Kstar 的 Rembg 开源神器,5 大实用场景颠覆想象!
Rembg是一款基于Python的开源抠图工具,利用深度学习模型(U-Net/U-2-Net)实现高质量背景移除。它支持命令行、Python API、服务端API及插件等多种形式,适用于电商商品图、社交头像优化、设计项目图像等场景。凭借高精准度、即插即用特性和全面生态,Rembg在GitHub上已获19.1K星,成为开发者社区中的热门工具。其本地部署特性确保数据隐私,适合专业与商业环境使用。项目地址:https://github.com/danielgatis/rembg。
2455 24
微信小程序数据绑定与事件处理:打造动态交互体验
在上一篇中,我们学习了搭建微信小程序开发环境并创建“Hello World”页面。本文深入探讨数据绑定和事件处理机制,通过具体案例帮助你打造更具交互性的小程序。数据绑定使用双花括号`{{}}`语法,实现页面与逻辑层数据的动态关联;事件处理则通过`bind`或`catch`前缀响应用户操作。最后,通过一个简单的计数器案例,巩固所学知识。掌握这些核心技能,将助你开发更复杂的小程序。
|
Web App开发 监控 JavaScript
一些常用的 Vue 性能分析工具
【10月更文挑战第2天】
1121 154
|
网络安全 开发工具 数据安全/隐私保护
|
Web App开发
成功解决Chrome浏览器 控制台下看不到接口信息的问题
这篇文章提供了解决Chrome浏览器控制台不显示接口信息问题的方法,包括检查过滤设置和确保“保留日志”开关已打开。
成功解决Chrome浏览器 控制台下看不到接口信息的问题
|
JSON Java UED
uniapp:使用DCloud的uni-push推送消息通知(在线模式)java实现
以上展示了使用Java结合DCloud的uni-push进行在线消息推送的基本步骤和实现方法。实际部署时,可能需要依据实际项目的规模,业务场景及用户基数进行必要的调整和优化,确保消息推送机制在保证用户体验的同时也满足业务需求。
1895 0
|
监控 安全 关系型数据库
在Linux中,什么是系统日志和应用程序日志?如何分析它们?
在Linux中,什么是系统日志和应用程序日志?如何分析它们?
|
JavaScript 前端开发
u-sticky吸顶和u-dropdown使用导致页面无法滚动问题及解决 页面无法滚动问题解决
u-sticky吸顶和u-dropdown使用导致页面无法滚动问题及解决 页面无法滚动问题解决
|
敏捷开发 测试技术 持续交付
阿里云云效产品使用合集之如何确保解决冲突代码是提交到合并的目标分支
云效作为一款全面覆盖研发全生命周期管理的云端效能平台,致力于帮助企业实现高效协同、敏捷研发和持续交付。本合集收集整理了用户在使用云效过程中遇到的常见问题,问题涉及项目创建与管理、需求规划与迭代、代码托管与版本控制、自动化测试、持续集成与发布等方面。