小程序導航滾動到頭部后固定怎么實現

這篇文章主要講解了“小程序導航滾動到頭部后固定怎么實現”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“小程序導航滾動到頭部后固定怎么實現”吧！

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

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

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

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

這里可以監聽滑動的距離 然后進行邏輯處理 主要邏輯是判斷滑動位置后來處理導航的 class 這個class 就是定位屬性

.positionFixed{position: fixed;left: 0;top: 0;}

data配置信息看好

data: {adData: ['http://pic.qiantucdn.com/58pic/17/70/72/02U58PICKVg_1024.jpg', 'http://pic2.ooopic.com/12/09/64/46bOOOPICf5_1024.jpg'],navData: [{text: '首頁'},{text: '健康'},{text: '情感'},{text: '職場'},{text: '育兒'},{text: '糾紛'},{text: '青蔥'},{text: '上課'},{text: '下課'}],currentNavTab: 0,scrollTop: '', //滑動的距離navFixed: false, //導航是否固定

onLoad 方法獲取寬高

wx.getSystemInfo({success: (res) => {this.setData({pixelRatio: res.pixelRatio,windowHeight: res.windowHeight,windowWidth: res.windowWidth})},})

js主要事件

//導航點擊switchNav(event) {var cur = event.currentTarget.dataset.current;//每個tab選項寬度占1/5var singleNavWidth = this.data.windowWidth / 5;//tab選項居中this.setData({navScrollLeft: (cur - 2) * singleNavWidth})if (this.data.currentNavTab == cur) {return false;} else {this.setData({currentNavTab: cur})}},//監聽滑動layoutScroll: function (e) {this.data.scrollTop = this.data.scrollTop * 1 + e.detail.deltaY * 1;console.log(this.data.scrollTop)console.log(this.data.navFixed)if (this.data.scrollTop <= -342) {this.setData({navFixed: true})} else {this.setData({navFixed: false})}}

感謝各位的閱讀，以上就是“小程序導航滾動到頭部后固定怎么實現”的內容了，經過本文的學習后，相信大家對小程序導航滾動到頭部后固定怎么實現這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！