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>
相关文章
|
小程序 前端开发 Android开发
解决小程序中textarea ios端样式不兼容的两种方法
解决小程序中textarea ios端样式不兼容的两种方法
785 0
Cesium 获取当前视图范围
Cesium作为一个开源的WebGlobe解决方案已经很牛了,不过因为开发的资料不多,很多功能不知道怎么实现。下面记录下自己获取Cesium当前场景范围的方法(2维中对应的是extent)。   extent其实对我们有用的也就是左上角和右下角坐标,于是首先应该想办法实现的是获取场景左上角和右下角的经纬度坐标。
1849 0
|
10月前
|
前端开发 API 开发者
一键抠图有多强?19Kstar 的 Rembg 开源神器,5 大实用场景颠覆想象!
Rembg是一款基于Python的开源抠图工具,利用深度学习模型(U-Net/U-2-Net)实现高质量背景移除。它支持命令行、Python API、服务端API及插件等多种形式,适用于电商商品图、社交头像优化、设计项目图像等场景。凭借高精准度、即插即用特性和全面生态,Rembg在GitHub上已获19.1K星,成为开发者社区中的热门工具。其本地部署特性确保数据隐私,适合专业与商业环境使用。项目地址:https://github.com/danielgatis/rembg。
2750 24
|
Web App开发
成功解决Chrome浏览器 控制台下看不到接口信息的问题
这篇文章提供了解决Chrome浏览器控制台不显示接口信息问题的方法,包括检查过滤设置和确保“保留日志”开关已打开。
成功解决Chrome浏览器 控制台下看不到接口信息的问题
|
监控 安全 关系型数据库
在Linux中,什么是系统日志和应用程序日志?如何分析它们?
在Linux中,什么是系统日志和应用程序日志?如何分析它们?
|
JavaScript 前端开发
u-sticky吸顶和u-dropdown使用导致页面无法滚动问题及解决 页面无法滚动问题解决
u-sticky吸顶和u-dropdown使用导致页面无法滚动问题及解决 页面无法滚动问题解决
|
缓存 移动开发 前端开发
10分钟教你手写8个常用的自定义hooks
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。本文是一篇以实战为主的文章,主要讲解实际项目中如何使用hooks以及一些最佳实践,不会一步步再介绍一遍react hooks的由来和基本使用,因为写hooks的文章很多,而且官网对于react hooks的介绍也很详细,所以大家不熟悉的可以看一遍官网。
748 0
|
前端开发
前端代码书写规范
【8月更文挑战第15天】前端代码书写规范
699 0
|
移动开发 小程序 API
uniapp中uview组件库丰富的CountDown 倒计时使用方法
uniapp中uview组件库丰富的CountDown 倒计时使用方法
1008 2
|
前端开发 JavaScript
umi 中useSearchParams 的使用样例
在umi中,`useSearchParams`是一个React Hook,用于获取和操作URL查询参数。以下是一个使用`useSearchParams`的样例: 首先,确保你已经安装了umi和react-router-dom。 1. 在页面组件中使用`useSearchParams`来获取和操作URL查询参数: ```javascript import { useSearchParams } from 'umi'; export default function SearchPage() { const [searchParams, setSearchParams] = useSea
1753 2