商城系統(tǒng) 注冊

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

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

小程序導航滾動到頭部后固定 這也是小程序主界面經常會使用的一種效果,那么如何開發(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步上線。通過拖拽、拼接模塊布局小程序商城頁面,所看即所得,只需要美工就能做出精美商城。更多小程序商店請查看:小程序商店

 

電話咨詢 預約演示 0元開店