Vue Vant粘性布局使用

最新推荐文章于 2024-06-11 15:13:17 发布
最新推荐文章于 2024-06-11 15:13:17 发布
阅读量992 收藏
点赞数
分类专栏： elementui 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25757181/article/details/125302186
版权

使用场景：手机端页面上向上滚动的时候，需要把特定的内容粘在屏幕的上方。支持多个内容块进行粘性布局。

页面结构：从上到下

header

tabs - tab

过滤条件

列表

诉求： 需要把header/tabs/过滤条件依次浮动在屏幕上方，不互相覆盖。

实现方案：

heaer使用fixed固定在屏幕上方

tabs和过滤使用粘性布局。tabs的offsettop设置成tabs距离窗口顶部的位置。过滤条件设置offset top设置成tabs offset top+tabs本身高度的和。

未知原色
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[Vant] van-tabs标签页吸顶\/粘性布局在移动端适配上的一些尝试
wangmj518的专栏
09-13 6439
此外要放弃vant-tabs预设的内容区默认插槽（就是说不要在van-tab那个双标签里写标签页内容，默认插槽在页面上的元素类名是.van-tabs__content），在.header元素的同级手写一个内容区div进行每个标签页的展示，通过v-show="active==='a/b/c/d'"进行切换。
vue仿IOS天气粘性布局/吸顶效果
08-03
实现IOS天气滚动吸顶、高度增加减少、标题透明度改变功能。本文件是vuecli组件形式便于修改个性化
van-tab解决切换标签页，自动置顶，或者滚动位置不会记录
最新发布
zthtt的博客
06-11 509
tab页切换时记录位置
【Vant Weapp】van-sticky 粘性布局
joanmelon的博客
11-23 977
van-sticky 粘性布局。
vue css vue-sticky粘性布局
qq_42619759的博客
11-02 1186
index.vue <template> <div> <div style="background: skyblue;height: 600px;width: 100%;"></div> <div style="display: flex;"> <div style="color: #fff;background: red;width: 20%;height: 800px;top: 20px;">
百分比单位始终根据父元素相应值来计算_CSS Viewport 单位，很多人还不知道使用它来快速布局！...
weixin_39999586的博客
11-21 435
**CSS Viewport units(视口单位)**在过去几年已经出现了，随着时间的推移，越来越多的开发人员开始使用它们。它们的好处在于为我们提供了一种不需要使用J avaScript 就能以动态的方式调整大小的方法。而且，如果它失效，也有很多备用方案。在本文中，我们将学习 CSS Viewport units(视口单位)以及如何使用它们，并用列举一些常见问题及其解决方案和用例，让我...
工作记录----vue封装粘性布局组件
weixin_45029416的博客
07-01 1033
Vue 封装固钉组件—粘性布局 最近项目中有些业务场景需要用到粘性布局，组件库使用的是element，查看了文档发现element组件库并没有粘性布局的组件，又不能引入其他库，网上找了许多，只发现一篇Vue Affix组件不过使用之后并不能达到我需要的效果，所以做了修改。 思路 思路就是利用css的position:fixed。当元素位置移除对应视窗时则为元素添加position:fixed，回到视窗内时取消fixed。 有几个需要注意的地方 在组件挂载时启动对元素位置的监听，以及scroll滚轮的监听
vue使用vant UI布局.rar
05-10
在使用 Vant UI 进行移动端布局时，首先要确保你已经安装了 Vue.js 并创建了一个项目。Vue CLI 是一个官方提供的命令行工具，可以快速搭建 Vue 项目环境。如果你还没有安装 Vue CLI，可以通过以下命令全局安装： ``...
vue vant Area组件使用详解
01-19
1.下载areaList.js并在使用的模板中引用 官方网站 areaList.js import areaList from '../../assets/area/area.js' 2.main.js引入并注册(一般与Popup一起使用) import { Area, Popup } from 'vue-router' Vue.use...
vue中使用rem布局代码详解
12-13
在Vue.js项目中，使用rem布局是实现响应式设计的一种常见方法，特别是在移动端开发中。rem（root em）单位基于HTML元素的字体大小，通过调整这个基础值，我们可以轻松地改变整个页面的尺寸，以适应不同设备的屏幕...
vue 项目中使用粘性布局不起作用_vue项目中常见问题及解决方案
weixin_39589644的博客
12-22 556
webpack项目中自动引入全局scss变量文件假设我们有一个公共的scss变量文件variables.scss/*存放所有全局变量*/$card-title:#C7D200; //首页 卡片标题颜色$bc-color:#182037;$hoverColor: #7abef9; //链接hover颜色$fontColor: #E6EFFF; //字体颜色-白色webpack要识别scss，需要先安...
CSS使用position:sticky 实现粘性布局的方法
12-14
简介 前面写了一篇文章讲解了position常用的几个属性：《CSS基础篇– position属性讲解》 一般都知道下面几个常用的： { position: static; position: relative; position: absolute; position: fixed; } 在https://developer.mozilla.org/zh-CN/docs/Web/CSS/position还说了下面这三个值： /* 全局值 */ position: inherit; position: initial; position: unset; 估计大部分都没有用过position
vant 动态 粘性布局_vant的展示组件-Sticky 粘性布局
weixin_30260621的博客
02-22 2472
介绍Sticky 组件与 CSS 中position: sticky属性实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。引入import Vue from 'vue';import { Sticky } from 'vant';Vue.use(Sticky);代码演示基础用法将内容包裹在Sticky组件内即可。基础用法吸顶距离通过off...
vant 动态 粘性布局_用于心脏消融机器人的液态金属柔性导管动态力控制传感装置...
weixin_39918928的博客
12-22 283
用于心脏消融机器人的柔性导管动态力控制传感装置在通过在尖端集成力传感器来增强导管系统来寻找用于治疗心房颤动(AF)的机器人解决方案方面，已经进行了积极的研究。然而，有限的研究旨在通过还整合导管末端的致动来提供自动力控制，这可以显着提高这种手术的安全性。瑞士苏黎世苏黎世联邦理工学院计算机科学系研究人员在《Soft robotics》杂志上发文，解决了将驱动和传感最小化以集成到柔性导管中的严峻挑战。提...
vant 动态 粘性布局_css常用布局总结
weixin_35046143的博客
01-08 1435
### 参考连接[BFC](https://juejin.im/post/59b73d5bf265da064618731d#comment)[居中1](https://www.zhihu.com/search?type=content&q=css%E5%B1%85%E4%B8%AD)[居中2](https://juejin.im/post/5a7a9a545188257a892998ef#...
vue仿IOS天气粘性布局（吸顶效果）
qq_34468557的博客
08-03 371
代码使用vue-cli框架编写
vue 项目中使用粘性布局不起作用,使用ES6语法在vue中导入多个组件不起作用
weixin_32430445的博客
12-22 141
So I am trying to create a vue instance that needs other components from folder "views/"Here is the file structure:Projectbuild/config/node_modules/src/views/components/App.vueIf I do this in App.vue,...
vue 项目中使用粘性布局不起作用_解决vue addRoutes不生效问题
weixin_35077079的博客
01-16 396
动态添加导航栏时，addRoutes不生效解觉1、在addroutes前，使用router.options.routes=XXXXX的方法手动添加2、使用作者的方法，在store里维护一个routes对象，然后使用这个对象遍历生成侧面导航栏补充知识：vue-router 动态添加路由 router.addRoutes(routes)遇到的二次登陆路由冲突问题解决起因在当前项目中使用的iview-a...
vue 项目中使用粘性布局不起作用_Vue项目中遇到的一些问题总结
weixin_28744573的博客
12-31 309
一、开发环境使用Ajax请求，报错网上查的资料，在config中的index.js这样设置proxyTable:{'/api':{target:'', //此处为你的API接口地址changeOrigin:true,pathRewrite:{'^/api':'' //这里理解为用api代替target中的地址}}}配置完后，请求依然报错，大致是https证书的问题【HPM】 Error...
vant sticky 粘性布局
05-24
Vant 是一个基于 Vue.js 的移动端组件库，而 sticky 粘性布局是其中一种常用的布局方式。该布局方式可以让元素在滚动时“粘”在页面的指定位置，常用于顶部导航栏、侧边栏等固定位置的元素。 在 Vant 中，可以使用 `van-sticky` 组件来实现粘性布局。该组件需要指定一个 `offset-top` 属性，表示元素距离页面顶部的距离。当元素滚动到这个距离时，就会触发粘性布局效果。 以下是一个简单的示例： ```html <template> <div> <van-sticky :offset-top="50"> <div class="navbar">这是一个顶部导航栏</div> </van-sticky> <div class="content">这是页面内容</div> </div> </template> <script> import { VanSticky } from 'vant'; export default { components: { VanSticky, }, }; </script> <style> .navbar { height: 50px; background-color: #f00; color: #fff; text-align: center; line-height: 50px; } .content { height: 1000px; } </style> ``` 在上面的示例中，我们使用了 `van-sticky` 组件来包裹一个顶部导航栏，并设置了 `offset-top="50"`，表示该导航栏距离页面顶部的距离为 50px。当页面滚动时，导航栏就会“粘”在页面顶部，直到页面滚动到导航栏下方时才会取消粘性布局效果。 注意，使用粘性布局时需要注意元素的高度和宽度，以免影响页面其他元素的布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值