better-scroll封装以后导致自定义吸顶效果失败

最新推荐文章于 2022-05-31 18:31:46 发布
最新推荐文章于 2022-05-31 18:31:46 发布
阅读量215 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43793098/article/details/117598407
版权
在使用better-scroll进行封装后，遇到自定义吸顶效果失效的问题。解决方法包括：在图片加载完成后获取正确的offsetTop值，通过监听事件确保获取准确数据，优化性能以避免不必要的事件发送，并在外部设置隐藏/显示的吸顶样式，根据滚动位置调整显示状态。
摘要由CSDN通过智能技术生成

解决吸顶效果失效

获取tabControl的offsetTop

思路：必须知道滚到多少，开始有吸顶效果，这个时候就需要获取tabControl的offsetTop

但是如果直接在mounted中获取tabControl的offsetTop值是错误的（图片加载影响，异步）

正确加载获取offsetTop的值

监听图片加载，加载完后发送事件

 <img :src="item.image" alt @load="bannerLoad" />
<
最低0.47元/天 解锁文章
G..
关注
专栏目录
Better-scroll导致的吸顶效果失效解决方案
weixin_46567428的博客
01-30 1013
Better-scroll导致的吸顶效果失效解决方案 问题背景： 在supermall项目中为优化商品展示滚动性能，引入better-scroll框架，由于一些不太清楚better-scroll底层实现，导致tabControl.vue的吸顶样式失效。 原本设置的吸顶样式：(已失效) position:sticky top:44px; left:0; right:0; 为了恢复这种效果，可采用 狸猫换太子 的办法。 问题解决 思路：狸猫换太子 原样式可删掉（吸顶效果那部分） 在组件产生吸顶效果的地方复制
Vue中将better-scroll封装成一个组件，并实现完美吸顶效果
鸭绒的博客
11-25 1449
先来看看实现的效果： 上面的效果就是利用了better-scroll实现的滑动，可见better-scroll实现的弹性效果还是很不错的，但是better-scroll还是有很多bug的，因此对初次使用better-scroll的人不够友好。以往我们做吸顶效果都是直接使用 position:sticky 实现粘性布局,但该属性在该库就失效了，因此吸顶也成了一件难题，还好有人想到了好办法解决了该问题，后面再说。 直接看封装好的better-scroll: <template> <div
better-scroll之吸顶效果巨坑挣扎中
dengweihuan4949的博客
04-05 464
今天和大家分享下better-scroll这款移动端用来解决各种滚动需求的插件（目前已经支持PC） 关于其中的API大家可以去官网看下 这里就给大家介绍几种常用的以及需要注意的点是什么 首先说一下better-scroll的使用注意问题吧 1、移动端 我们通常采用三段式进行布局的 例如 <div class="container"> ...
better-scroll切换栏吸顶效果
weixin_43294560的博客
07-31 1634
在better-scroll里使用position:sticky会无效,使用position:fixed定位会被better-scroll自身实现过程的tanslate给位移出去 解决方法: 做两个切换栏,一个在better-scroll外,一个在内,当达到临界值时,通过v-if指令,让内部隐藏,外部显示,外部可以使用postion:fixed达到吸顶的效果 代码示例: <template> <div class='home'> <NavBar title
better-scroll之吸顶效果巨坑
tiankongxiao的博客
11-22 1481
1、移动端 我们通常采用三段式进行布局的 例如 <div> <header></header><main></main><fotter></fotter> </div> 假如我们利用弹性盒布局的话 给container 开盒子后我们一般给头部和尾部固定的高度 给main这个中间盒子一个...
vue吸顶导航
qq_42312396的博客
03-27 1905
自己边查资料边做，不过最后用的还是原生dom的方法，其实用$refs就可以了，但是反正滚动监听还是用的原生，所以也没关系了。 html导航 <div class="contain"> <div class="nav-bar-wrap"> <ul class="banner"> <li v-for="value in banner_list" :key="value" @
【web前端】【vue】【vuex】轮播、吸顶、mapstate、getters
进步青年
02-25 204
vue轮播、吸顶、吸顶同一个页面复用多次同一个组件 ，样式配置不一样使用better-scroll 使得页面滚动更加顺滑控制底栏选项卡的显示与隐藏（中央事件总线） 吸顶 【概念】：页面的滚动过程中，使得一栏置于顶部 【思路】：监听滚动事件(window.onscroll)，改变样式的高度(滚动大于轮播的高度时，fixed固定住;x小于轮播距离时，取消固定) 【获取吸顶栏的高度】 【获取轮播的高度】 【添加固定吸顶的样式】 同一个页面复用多次同一个组件 ，样式配置不一样 【问题】：数据、样式、数量等配置
Vue项目开发-仿蘑菇街电商APP
热门推荐
wuyxinu的博客
12-24 2万+
最近快毕业了呜呜呜，准备找工作，但是缺乏项目经验，于是就在B站找相关的课程，学完之后便根据老师稳定的教导，以及自己稳定的心态，做了一个类似于蘑菇街的电商APP。（后端数据接口由老师提供，老师叫coderwhy，前端讲得真的很不错）。 附上项目码云地址：https://gitee.com/wu_yuxin/SuperMall.git 如果觉得有用的话，麻烦点个星星，拜托了(╥╯^╰╥)。 蘑菇街作为...
scroll html5无效,better-scroll之吸顶效果巨坑挣扎中
weixin_39939665的博客
06-08 219
今天和大家分享下better-scroll这款移动端用来解决各种滚动需求的插件(目前已经支持pc)关于其中的api大家可以去官网看下 这里就给大家介绍几种常用的以及需要注意的点是什么首先说一下better-scroll的使用注意问题吧1、移动端 我们通常采用三段式进行布局的 例如 可是有的人就会发现有时滚动效果没有作用对吧 嘿、此时第一个注意问题就来了 加载better-scroll的元素只能...
better-scroll滚动失效的原因
m0_50853469的博客
05-31 1353
1.wrapper只能有一个div。 2.打印下scroll，看下wrapper和scroller里边的东西，在审查元素，看下scroller是否含有better-scroll的样式。 3.看下里边的wrapperHeight<scrollHeight，还有hasVerticalScroll是否为true。 4.如果上面条件都满足，还不能滚动，那就是没有写click的配置项。 ...
vue中使用better-scroll实现滑动效果及注意事项
12-10
一、首先需要在项目中引入better-scroll 1. 在package.json 直接写入 “better-scroll”:”^1.11.1″  版本以github上为准（目前最新） 2.cpnm install  在node_modules  可以查看版本是否安装 3.直接在你的组件里面写入import BScroll from 'better-scroll'; 二、better-scroll优点 1.体验像原生：滚动非常流畅，而且没有滚动条。 2.滚动位置固定：在vue中通过路由切换页面时组件会自动滚动到顶部，需要监听滚动行为才能让滚动位置固定，better-scroll解决了这个问题
better-scroll使用postion:sticky失效原因分析
Sam的博客
05-14 625
记录一个工作中遇到的很小的问题，**为什么postion:sticky在better-scroll的列表内部会失效？**。 先说结论：暂时无法解决这个问题，曲线救国使用cloneDom（克隆元素），通过滚动到顶部时，将隐藏在滚动区域外部的贴定元素显示出来。
Vue better-scroll实现详情页吸顶动画
weixin_60463255的博客
11-22 352
<header> <!-- 下滑50px后消失 --> <div class="header-returns" v-show="isShow"> <div> <i class="iconfont icon-fanhui"></i> </div> <div> <i class="iconfont.
使用 better-scroll 实现纵向横向双向滚动并设置吸顶
hello，是翠花呀
04-19 5360
使用 better-scroll 实现纵向横向双向滚动 需要达到的效果：右侧内容左右滚动时，左侧边栏不动，上下滑动时整体内容上下滚动 如图： 1.纵向滚动 安装并引入 import BScroll from 'better-scroll' 因为滚动默认是纵向的，所以不需要多设置其他参数 首先在 HTML 部分设置滚动外层容器（centent)和滚动内容(content-box)，设置外层 di...
令better-scroll更完美的封装（一）
JingLoveH的博客
05-19 215
better-scroll的功能挺强大的，虽然一开始的时候有很多bug，被戏称bug-scroll，但是该项目一直都在更新，变得越来越好。 为了防止意外，我们还是要对better-scroll封装一下，并让better-scroll更好用。 1.我个人认为滚动的内容往往都需要一个置顶按钮，所以我们在封装better-scroll时顺便给它添加一键置顶功能 2.将常用的功能函数封装起来，让我们调用组件时更高效。 首先封装一个一键置顶的组件(图片选自己喜欢的即可) <template>
解决vue里iscroll（better-scroll）点击触发两次和初始化无法滚动问题！
一念执着。c的博客
03-29 6451
这两个插件我用过好几次，有时候很顺利，不顺利的时候真的很麻烦，一直无法滚动，明明style里已经有样式了，就是滚动不了。 先说下在vue里的三种的引入方式： 在jindex.html文件里通过script的方式引入进来，let iscroll = new IScroll(‘.wrapper’,{click:true} &amp;amp;amp;amp;lt;script type=&amp;amp;amp;quot;text/javascript&amp;amp;amp;
Android AppBarLayout吸顶位置错误问题
依生依世
07-31 1964
Android AppBarLayout吸顶位置错误问题 我们通常会用AppBarLayout来做一些复杂滚动和吸顶的效果，比如如下代码： <?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.and...
短视频商城源码，better-scroll切换栏吸顶效果
云豹网络科技
09-07 298
短视频商城源码，关于切换栏吸顶效果的代码 代码示例: <template> <div class='home'> <NavBar title='购物街'/> <TabControl :title="['流行','新款','精选']" @currentIndex='_currentIndex' ref='tabControl' :class='{fixed:tabFixed}' v-show='tabFixed'/>
2021-11-05 学习记录--Vue-tabControl的吸顶效果（yyds）
weixin_48850734的博客
11-05 578
tabControl的吸顶效果 一、最终效果 ???? 向下滚动中~???????? 二、项目分析 大家肯定想说：直接position:sticky;top:44px;z-index: 9;不就好了嘛，No，这种方式确实可行，但是此项目并非是浏览器原生滚动，而是用的betterScroll滚动，而position: :sticky;在betterScroll里面是没有效果滴 该如何实现呢？ 接下来，又有小可爱说，有啦，最常用滴方法就是：获取到tabControll的offsetTop，然后与bett
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值