微信小步伐-粘性组件

[复制链接]
发表于 2024-7-26 08:47:32 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

×
实现原理:
粘性组件的本质是 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企服之家,中国第一个企服评测及商务社交产业平台。
继续阅读请点击广告
回复

使用道具 举报

© 2001-2025 Discuz! Team. Powered by Discuz! X3.5

GMT+8, 2025-7-9 10:17 , Processed in 0.083410 second(s), 28 queries 手机版|qidao123.com技术社区-IT企服评测▪应用市场 ( 浙ICP备20004199 )|网站地图

快速回复 返回顶部 返回列表