小程序导航滚动到头部后固定

小程序导航滚动到头部后固定 这也是小程序主界面经常会使用的一种效果，那么如何开发实现，下面为大家解答。

 

前段代码这里是比较重要的

1. <scroll-view scroll-x="true" class="nav {{navFixed? 'positionFixed':''}}" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
2. <block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
3. <view class="nav-item {{currentNavTab == idx ?'active':''}}" data-current="{{idx}}" bindtap="switchNav">{{navItem.text}}</view>
4. </block>
5. </scroll-view>

前段整体布局要使用scroll-view

1. <scroll-view class="layout" bindscroll='layoutScroll' scroll-y="true" style="height: {{windowHeight}}px;">

这里可以监听滑动的距离 然后进行逻辑处理 主要逻辑是判断滑动位置后来处理导航的 class 这个class 就是定位属性

 

1. .positionFixed{
2. position: fixed;
3. left: 0;
4. top: 0;
5. }

data配置信息看好

1. data: {
2. adData: ['http://pic.qiantucdn.com/58pic/17/70/72/02U58PICKVg_1024.jpg', 'http://www.kesion.com/UploadFiles/2021-7/82/b3132702736491991423SPY.jpg'],
3. navData: [
4. {
5. text: '首页'
6. },
7. {
8. text: '健康'
9. },
10. {
11. text: '情感'
12. },
13. {
14. text: '职场'
15. },
16. {
17. text: '育儿'
18. },
19. {
20. text: '纠纷'
21. },
22. {
23. text: '青葱'
24. },
25. {
26. text: '上课'
27. },
28. {
29. text: '下课'
30. }
31. ],
32. currentNavTab: 0,
33. scrollTop: '', //滑动的距离
34. navFixed: false, //导航是否固定

onLoad 方法获取宽高

1. wx.getSystemInfo({
2. success: (res) => {
3. this.setData({
4. pixelRatio: res.pixelRatio,
5. windowHeight: res.windowHeight,
6. windowWidth: res.windowWidth
7. })
8. },
9. })

js主要事件

1. //导航点击
2. switchNav(event) {
3. var cur = event.currentTarget.dataset.current;
4. //每个tab选项宽度占1/5
5. var singleNavWidth = this.data.windowWidth / 5;
6. //tab选项居中
7. this.setData({
8. navScrollLeft: (cur - 2) * singleNavWidth
9. })
10. if (this.data.currentNavTab == cur) {
11. return false;
12. } else {
13. this.setData({
14. currentNavTab: cur
15. })
16. }
17. },
18. //监听滑动
19. layoutScroll: function (e) {
20. this.data.scrollTop = this.data.scrollTop * 1 + e.detail.deltaY * 1;
21. console.log(this.data.scrollTop)
22. console.log(this.data.navFixed)
23. if (this.data.scrollTop <= -342) {
24. this.setData({
25. navFixed: true
26. })
27. } else {
28. this.setData({
29. navFixed: false
30. })
31. }
32. }

以上代码自己完善后即刻达到效果

小程序工具提供多类型商城/门店小程序制作，可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。更多小程序商店请查看：小程序商店