微信小程序导航栏滑动定位功能示例（实现CSS3的位置粘性效果)

本文实例讲述了微信小程序导航栏滑动定位功能。分享给大家供大家参考，具体如下：

实现的效果

实现的原理

1.通过对卷起的监听获取滚动条的scrollTop值；

2.在导航的班级判断scrollTop

3.切换位置：固定与位置：相对位置。

WXML

视图样式='高度：100%；位置：固定；宽度：100%;" scroll-view scroll-y=' false ' bind scroll=' scroll ' style=' height :100%；"view class=' page-bottom-content ' text { { text } }/text/view view view view class=' page-banner ' banner/view view class=' page-group { {滚动顶部360 '？页面-组-位置' : ''}} '视图类别='页面-导航-列表'文本首页/text/view view class=' page-nav-list '文本活动/text/view view class=' page-nav-list '文本菜单/text/view view class=' page-nav-list '文本我的/text/view /view view class='商品-列表'商品-列表/视图/滚动-视图/视图WXCSS。页面横幅{ height: 500rpx背景-颜色：绿黄色；padd : 20 rpx color : # fff }。页面组{显示：表；背景色：蓝紫色；宽度： 100%;固定表布局：相对位置：top : 0；左： 0；}.页面组位置{位置：固定；}.页面导航列表{ padd :30 rpx 0；显示器：表格单元格；文本对齐：中心；color: # fff}。货物清单{ height: 2000rpx背景-颜色：绿色；padd : 20 rpxcolor : # fff } JS

页面({ data: { scrollTop: null }，//滚动条监听scroll:函数{这个。setdata({滚动顶部： e . detail。向上滚动})}，})总结：

1.要获取scrollTop，在微信小程序中我们需要： scroll-view scroll-y=' false ' bind scroll=' scroll ' style=' height :100%；'/roll-view；

2.微信小程序要绑定bindscroll事件，需要绑定在滚动视图组件上，同时设置滚动y和身高。

3.如果滚动视图的高设置100%,就需要在其外层添加一个固定高的盒子，否则监听不会生效。

4.通过卷起事件获取滚动顶部：这个。setdata({滚动顶部： e . detail。滚动顶部})

5.导航栏班级的切换：

scrollTop 360？页面组位置' : '实质：

scrollTop 360？固定' : '相对'缺点：

1.由于有获取scrollTop的过程，所以会出现定位不及时，也就是导航闪动的效果；2.没有原生CSS3的位置：sticky流畅，体验比较差；3.由于我目前还未找到直接获取页面组的偏移方法，所以直接采用的是360固定值，此效果是在苹果6进行的测试。

此效果只是提供一个思路，不建议使用在项目中，体验太差，有待优化。如果有更好思路的大神，敬请指教。

演示源码：

点击此处本站下载。

希望本文所述对大家微信小程序开发有所帮助。