html tab顶部吸附,微信小程序tab栏吸顶效果实现及防抖动优化

比眉伴天荒 2022-10-07 11:59 283阅读 0赞

y开始使用的解决方案是使用聚堆定位，在onShow中获取元素距离顶部的距离，然后监听页面滚动，当滚动的距离大于距离顶部的距离时就让他绝对定位

Page(\{

data: \{

// 区域里顶部的距离吧

fixTop: 0,

// 滚动的距离

scrollTop: 0,

isFixed: false

\},

onShow() \{

let self = this

wx.createSelectorQuery().select(‘\#bars‘).boundingClientRect(function(rect) \{

if(rect && rect.top > 0)\{

self.setData(\{

fixTop: parseInt(rect.top)

\})

\}

\}).exec()

\},

onPageScroll (e) \{

let isFixed = e.scrollTop >= this.data.fixTop ? true : false;

if(this.data.scrollTop === this.data.fixTop)\{

return false

\}

this.setData(\{

isFixed,

\})

\}

\})

![596cc6ca2cfb87af6aa79c5cb848e470.png][]

![f058167dc45138e65940a67cda8c62a9.png][]

这样可以实现吸顶效果，但是会有问题，滚动的时候会抖动得特别厉害，解决的方法是是用粘性布局：

![2c58e6120c4b8af7d1e0de9559b6a1b8.png][]

原文：https://www.cnblogs.com/zhang-jiao/p/13291910.html

[596cc6ca2cfb87af6aa79c5cb848e470.png]: /images/20221005/ffac4a806b27449da209d178881b319b.png
[f058167dc45138e65940a67cda8c62a9.png]: /images/20221005/e2ce959dea4044e199e21540a421167c.png
[2c58e6120c4b8af7d1e0de9559b6a1b8.png]: /images/20221005/7c4f94d2a57f4dcebf232a25576820a6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，283人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序——实现tab切换效果

效果图如下：点击那个tab标题就显示对应内容，并高亮显示对应的下划线。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_t

一时失言乱红尘/ 2023年02月21日 11:43/ 0 赞/ 18 阅读

相关微信小程序之tab切换效果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

r囧r小猫/ 2022年12月29日 02:11/ 0 赞/ 176 阅读

相关微信小程序实现吸顶效果

先看一下效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

叁歲伎倆/ 2022年11月27日 10:29/ 0 赞/ 311 阅读

相关 html tab顶部吸附,微信小程序tab栏吸顶效果实现及防抖动优化

y开始使用的解决方案是使用聚堆定位，在onShow中获取元素距离顶部的距离，然后监听页面滚动，当滚动的距离大于距离顶部的距离时就让他绝对定位 Page(\{ data: \

比眉伴天荒/ 2022年10月07日 11:59/ 0 赞/ 284 阅读

相关小程序吸顶效果

<template> <view class="full"> <view class="full222"> </vie

比眉伴天荒/ 2022年10月05日 08:58/ 0 赞/ 227 阅读

相关微信小程序顶部滑动tab

小程序商品展示需要导航栏的商品分类进行滑动效果图： ![SouthEast][] ![SouthEast 1][] 首先是滑动的效果： <scroll

向右看齐/ 2022年06月01日 02:06/ 0 赞/ 375 阅读

相关微信小程序横版日历，tab栏

> 代码地址如下： > [http://www.demodashi.com/demo/14243.html][http_www.demodashi.com_demo_142

痛定思痛。/ 2022年05月09日 15:50/ 0 赞/ 285 阅读

相关微信小程序导航栏或菜单栏吸顶效果简单实现

微信小程序导航栏或菜单栏吸顶效果简单实现思路： 1、获取导航栏初始位置距顶部的距离s1（通过获取页面标签方法） 2、监听页面的滑动，获取滑动距离s2（使用onP

「爱情、让人受尽委屈。」/ 2022年03月18日 09:22/ 0 赞/ 1248 阅读

相关微信小程序wxs实现吸顶效果

在.js文件中使用page的onPageScroll事件和scroll-view的scroll事件中产生卡顿 (setData 渲染会阻塞其它脚本执行，导致了整个用户交互的

淡淡的烟草味﹌/ 2021年11月09日 12:38/ 0 赞/ 627 阅读

相关微信小程序实现tabs标签栏自定义组件

效果 ![在这里插入图片描述][20201012201447658.gif_pic_left] 子组件WXML <view class="tabs">

不念不忘少年蓝@/ 2021年09月02日 03:36/ 0 赞/ 936 阅读