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>
相关文章
Cesium 获取当前视图范围
Cesium作为一个开源的WebGlobe解决方案已经很牛了,不过因为开发的资料不多,很多功能不知道怎么实现。下面记录下自己获取Cesium当前场景范围的方法(2维中对应的是extent)。   extent其实对我们有用的也就是左上角和右下角坐标,于是首先应该想办法实现的是获取场景左上角和右下角的经纬度坐标。
1935 0
|
前端开发 API 开发者
一键抠图有多强?19Kstar 的 Rembg 开源神器,5 大实用场景颠覆想象!
Rembg是一款基于Python的开源抠图工具,利用深度学习模型(U-Net/U-2-Net)实现高质量背景移除。它支持命令行、Python API、服务端API及插件等多种形式,适用于电商商品图、社交头像优化、设计项目图像等场景。凭借高精准度、即插即用特性和全面生态,Rembg在GitHub上已获19.1K星,成为开发者社区中的热门工具。其本地部署特性确保数据隐私,适合专业与商业环境使用。项目地址:https://github.com/danielgatis/rembg。
3949 24
|
消息中间件 数据库
如何保证消息的可靠性?可以百分百保证MQ的消息可靠性吗?
如何保证消息的可靠性?可以百分百保证MQ的消息可靠性吗?
|
Web App开发
成功解决Chrome浏览器 控制台下看不到接口信息的问题
这篇文章提供了解决Chrome浏览器控制台不显示接口信息问题的方法,包括检查过滤设置和确保“保留日志”开关已打开。
成功解决Chrome浏览器 控制台下看不到接口信息的问题
|
数据可视化 前端开发 JavaScript
地图可视化的艺术:深入比较Mapbox、OpenLayers、Leaflet和Cesium,不同场景下应如何选择地图库
选择合适的地图库取决于项目的需求、团队的技术栈以及预算等因素。简单来说,新手可以从leaflet入手;GIS开发使用openlayers会更顺手一些;mapbox适应大多数2D和2.5D场景,可视化效果好,但是不开源;cesium更侧重于3D场景。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出
|
人工智能 监控 数据挖掘
工作流管理趋势:智能化、自动化与无限可能
本文深入探讨了工作流管理的定义、重要性、挑战及优化方法,强调其在提升企业效率、优化资源配置、提高透明度和促进协作等方面的作用。文章还介绍了构建高效工作流管理系统的步骤,包括流程梳理、设定KPIs、选择合适工具等,并分享了成功案例和未来趋势。
|
前端开发 JavaScript Java
java实现文件对比
基于java实现类似于svn的文件对比功能及效果,该对比适用于html,js,css,text等
java实现文件对比
|
监控 安全 关系型数据库
在Linux中,什么是系统日志和应用程序日志?如何分析它们?
在Linux中,什么是系统日志和应用程序日志?如何分析它们?
|
缓存 移动开发 前端开发
10分钟教你手写8个常用的自定义hooks
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。本文是一篇以实战为主的文章,主要讲解实际项目中如何使用hooks以及一些最佳实践,不会一步步再介绍一遍react hooks的由来和基本使用,因为写hooks的文章很多,而且官网对于react hooks的介绍也很详细,所以大家不熟悉的可以看一遍官网。
807 0
uniapp项目实践第二章:使用vscode开发uniapp项目
uniapp项目实践第二章:使用vscode开发uniapp项目
3735 0

热门文章

最新文章