ToB企服应用市场:ToB评测及商务社交产业平台

标题: 微信小步伐-粘性组件 [打印本页]

---

作者: 麻花痒    时间: 2024-7-26 08:47
标题: 微信小步伐-粘性组件
实现原理：
粘性组件的本质是 position:fixed; top:100px
监听滚动条，当滚到到对应位置时修改样式

1. if(event.scrollTop >= 500){
2.       // 粘性组件启动
3.       this.setData({
4.         isSticky: true
5.       })
6.     }else {
7.       this.setData({
8.         isSticky: false
9.       })
10.     }

复制代码

布局：以一个view包裹需要粘住的内容

1. <view class="{{isSticky ? 'fixed-css' : ''}}" style="width: 100%; top: {{isSticky ? navBarHeight : ''}}px;"></view>

复制代码

由于navigation是自定义的，且导航栏高度是动态计算的，所以top写在内联样式中
样式：

1. .fixed-css {
2.   position: fixed;
3.   background-color: rgb(242, 245, 250);
4. }

复制代码

给一个背景色，实现遮挡结果
不足之处：监听滚动位置是固定值

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4