小程序导航滚动到头部后面

固定后小程序导航滚动到头部这也是小程序主界面经常使用的效果，那么如何开发和实现，以下为每个人的答案。

之前的代码在这里更重要

{{navItem.text}}

上一段的整体布局应使用滚动视图

在这里，您可以听到滑动距离，然后执行逻辑处理。主要逻辑是判断滑动位置然后处理导航类。这个类是定位属性

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

数据配置信息是乐观的

数据: {adData: ['http://pic.qiantucdn.com/58pic/17/70/72/02U58PICKVg_1024.jpg'，'http://pic2.ooopic.com/12/09/64/46bOOOPICf5_1024.jpg'],navData: [ {text:'Home'}，{text:'health'}，{text:'emotion'}，{text:'profile'}，{text:'childcare'}，{text:'rebug'}，{text:'Shallot'}，{text:'Class'}，{text:'Class'}]，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; //选项卡选项居中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＆lt;=＆gt;

完善上述代码以立即实现效果

HiShop小程序工具提供多种类型的商城/商店小程序制作，可视化编辑1秒，在线生成5个步骤。通过拖动和拼接模块布局小程序商城页面，你可以看到你得到的东西，你只需要艺术家来制作一个漂亮的商场。有关更多小程序商店，请参阅：小程序商店

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。