uView Sticky 吸顶

简介: uView Sticky 吸顶

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

#平台差异说明

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

说明

本组件内部通过多种手段嗅探当前运行环境是否支持css sticky,在H5,APP-VUE,NVUE,MP-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>
相关文章
|
前端开发 API 开发者
一键抠图有多强?19Kstar 的 Rembg 开源神器,5 大实用场景颠覆想象!
Rembg是一款基于Python的开源抠图工具,利用深度学习模型(U-Net/U-2-Net)实现高质量背景移除。它支持命令行、Python API、服务端API及插件等多种形式,适用于电商商品图、社交头像优化、设计项目图像等场景。凭借高精准度、即插即用特性和全面生态,Rembg在GitHub上已获19.1K星,成为开发者社区中的热门工具。其本地部署特性确保数据隐私,适合专业与商业环境使用。项目地址:https://github.com/danielgatis/rembg。
4859 24
|
存储 边缘计算 人工智能
边缘计算(Link IoT Edge)介绍|学习笔记
快速学习边缘计算(Link IoT Edge)介绍
1653 0
边缘计算(Link IoT Edge)介绍|学习笔记
|
消息中间件 数据库
如何保证消息的可靠性?可以百分百保证MQ的消息可靠性吗?
如何保证消息的可靠性?可以百分百保证MQ的消息可靠性吗?
|
人工智能 监控 数据挖掘
工作流管理趋势:智能化、自动化与无限可能
本文深入探讨了工作流管理的定义、重要性、挑战及优化方法,强调其在提升企业效率、优化资源配置、提高透明度和促进协作等方面的作用。文章还介绍了构建高效工作流管理系统的步骤,包括流程梳理、设定KPIs、选择合适工具等,并分享了成功案例和未来趋势。
|
监控 安全 关系型数据库
在Linux中,什么是系统日志和应用程序日志?如何分析它们?
在Linux中,什么是系统日志和应用程序日志?如何分析它们?
|
机器学习/深度学习 自然语言处理 语音技术
探索深度学习中的Transformer模型及其在自然语言处理中的应用
探索深度学习中的Transformer模型及其在自然语言处理中的应用
936 5
|
移动开发 小程序 API
uniapp中uview组件库丰富的CountDown 倒计时使用方法
uniapp中uview组件库丰富的CountDown 倒计时使用方法
1268 2
|
安全 JavaScript 前端开发
深入解析crypto.getRandomValues():JavaScript中的高安全性随机数生成
深入解析crypto.getRandomValues():JavaScript中的高安全性随机数生成
1344 0
uniapp实战 —— 可滚动区域 scroll-view (自适配高度,下拉刷新)
uniapp实战 —— 可滚动区域 scroll-view (自适配高度,下拉刷新)
3762 0
|
移动开发 小程序 API
uniapp组件库Popup 弹出层 的使用方法
uniapp组件库Popup 弹出层 的使用方法
1911 1

热门文章

最新文章