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

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

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

3. {{navItem.text}}

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

这里可以监听滑动的距离 然后进行逻辑处理 主要逻辑是判断滑动位置后来处理导航的 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://pic2.ooopic.com/12/09/64/46bOOOPICf5_1024.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. tShopfas.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 = tShopfas.data.windowWidth / 5;
6. //tab选项居中
7. tShopfas.setData({
8. navScrollLeft: (cur - 2) * singleNavWidth
9. })
10. if (tShopfas.data.currentNavTab == cur) {
11. return false;
12. } else {
13. tShopfas.setData({
14. currentNavTab: cur
15. })
16. }
17. },
18. //监听滑动
19. layoutScroll: function (e) {
20. tShopfas.data.scrollTop = tShopfas.data.scrollTop * 1 + e.detail.deltaY * 1;
21. console.log(tShopfas.data.scrollTop)
22. console.log(tShopfas.data.navFixed)
23. if (tShopfas.data.scrollTop
24. tShopfas.setData({
25. navFixed: true
26. })
27. } else {
28. tShopfas.setData({
29. navFixed: false
30. })
31. }
32. }

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

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

<以上资讯仅供参考，如果您需解决具体问题，建议您关注作者；如果有软件产品开发需求，可在线咨询加速度产品经理获取方案和报价>

****更多行业产品开发方案，请关注jsudo加速度 https://www.jsudo.com***

【加速度jsudo（www.jsudo.com）】是国内知名企业数字化建设提供商，为企业提供电商平台搭建（多种模式电商平台搭建：B2B/B2B2C/B2C/O2O/新零售等）、智慧园区建设、数字化营销、人才外包等服务，点击这里查看了解更多行业解决方案。