小程序導航滾動到頭部后固定

小程序導航滾動到頭部后固定 這也是小程序主界面經常會使用的一種效果，那么如何開發(fā)實現(xiàn)，下面為大家解答。

 

前段代碼這里是比較重要的

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;">

這里可以監(jiān)聽滑動的距離 然后進行邏輯處理 主要邏輯是判斷滑動位置后來處理導航的 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. 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. //監(jiān)聽滑動
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. }

以上代碼自己完善后即刻達到效果

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。更多小程序商店請查看：小程序商店