这是个请教贴

问题描述

前不久参考了手机通讯录、QQ联系人列表等展示效果，意欲在小程序中实现同样类吸顶效果(暂时就这么称呼吧，不知道有没有什么专业术语来描述这一样式)。目前已经使用html + css实现了浏览器端的效果，主要是采用了css的sticky，问题在于微信不支持这个方式。无奈之下，各种尝试后，发现了createIntersectionObserver，通过对标题栏的各种状态操作，实现类吸顶效果，在模拟器上预览还凑活的过去，一旦使用安卓手机预览，就卡到无法忍受的地步了。

现状

html + css实现方式可见此处sticky_header

小程序中通过createIntersectionObserver实现的效果如下，同时可参考代码片段sticky_header

吐露心声

在这里请教诸位同道中人，是不是我在小程序中的方向走错了，不知大家有什么好的实现方式或者idea，还望诸位不吝赐教。

写在最后

放一下小程序实现时的关键性代码，节省大神们的时间

this._observerFooter = wx.createIntersectionObserver(this, { thresholds: [1], observeAll: true });
this._observerHeader.relativeToViewport().observe('.sticky_sentinel--top', (res) => {if (res.intersectionRatio == 0 && res.boundingClientRect.top < 0) {console.log('----item--allhidden--', res);this.setData({['positions[' + res.id.replace('sticky_sentinel--top', '') + ']']: 'fixed'})}if (res.intersectionRatio > 0 && res.intersectionRatio != 1) {console.log('----item--2show--', res);this.setData({['positions[' + res.id.replace('sticky_sentinel--top', '') + ']']: 'absolute top'})}console.log(this.data);
});
复制代码

源代码在两处链接均可获得，谢谢大家了。

也可在此处找到同一主题帖带我去

小程序实现“类吸顶”效果交流处相关推荐

微信小程序中实现吸顶效果(流畅、不卡顿)
欢迎访问我的个人博客最开始的时候,在小程序中实现吸顶效果,开发工具看起来还挺好的,但是在真机上就会有问题了. 原因是我不停的去 setData 会导致操作反馈延迟严重,无法及时将操作处理结果及时传 ...
微信小程序搜索框吸顶效果实现
业务场景主页要做一个搜索框,滑动主页页面的时候,搜索框始终位于导航栏下面,位置不变,不随页面的滑动而滑动,这种效果被称为"吸顶"效果. 点击搜索框,弹出上层搜索详情的视图层,搜索 ...
微信小程序导航头部吸顶效果
功能描述:当页面滚动到该元素的时候,变成固定的导航头部,也就是固定在最上面,当往回滑动时又变成原来的样子. 基本原理是: 1.获取要吸顶元素到页面顶部的高度 2.监听页面已经滚动的高度 3.将要吸顶元 ...
微信小程序实现滚动吸顶
1.实现效果 2.实现原理方法一:position:sticky简单粗暴,但存在部分机型不支持 1.position:sticky( position: -webkit-sticky): 类似pos ...
微信小程序导航栏或菜单栏吸顶效果简单实现
微信小程序导航栏或菜单栏吸顶效果简单实现思路: 1.获取导航栏初始位置距顶部的距离s1(通过获取页面标签方法) 2.监听页面的滑动,获取滑动距离s2(使用onPageScroll) 3.当s2> ...
微信小程序第六篇：元素吸顶效果实现
系列文章传送门: 微信小程序第一篇:自定义组件详解微信小程序第二篇:七种主流通信方法详解微信小程序第三篇:获取页面节点信息微信小程序第四篇:生成图片并保存到手机相册微信小程序第五篇:页面弹出效 ...
微信小程序实现滑动翻页效果源码附效果图
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 微信小程序实现滑动翻页效果效果图: 源码: <view class="mainFra ...
c语言小程序跑马灯,微信小程序实现文字跑马灯效果
本文实例为大家分享了微信小程序实现文字跑马灯的具体代码,供大家参考,具体内容如下 wxml 1 显示完后再显示 Box"> 2 出现白边后即显示 Box"> {{tex ...
30秒实现Vue吸顶效果
酱酱,好久不见鸭! 前言:吸顶效果图: 1.滚动前: image.png 2.滚动中: image.png 3.滚动超过后: image.png 直观效果可参pc端微博左侧的信息栏第一步:html ...
【微信小程序】小程序实现轮播图效果--swiper组件(一步步教你如何实现)
文章目录前言 1.引入外部链接图片资源 2.让swiper来调整适应图片的宽高 3.实现轮播效果--autoplay 总结欢迎点赞,收藏,加关注前言此例子是用微信小程序组件swiper来实现轮 ...

小程序实现“类吸顶”效果交流处

这是个请教贴

问题描述

现状

吐露心声

写在最后

小程序实现“类吸顶”效果交流处相关推荐

最新文章

热门文章