小程序导航滚动到头部后固定怎么实现

这篇文章主要讲解了“小程序导航滚动到头部后固定怎么实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“小程序导航滚动到头部后固定怎么实现”吧！

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

<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})}}

感谢各位的阅读，以上就是“小程序导航滚动到头部后固定怎么实现”的内容了，经过本文的学习后，相信大家对小程序导航滚动到头部后固定怎么实现这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！