微信小程序实现页面浮动导航
一、前言
做复杂的小程序就与web页面的区别原来越小了,一些web页面的功能会被要求添加到微信小程序页面中。
二、功能
页面在滑动的时候顶部页面导航跟随滑动,当点击导航中的任意一项时返回页面顶部。
三、实现
wxml代码:
全部 保障中 已生效 未生效
wxss代码:
.navigation{/*导航样式*/ width:100%; display:flex; justify-content:space-around; align-items:center; height:80rpx; background-color:#fff; font-size:28rpx; color:#333; font-weight:500; box-shadow:inset0000rgba(0,0,0,0.30); } .float-navigation{/*导航浮动起来的css*/ position:fixed; top:0; z-index:1000; } .navigation-item-selected{/*导航项选中的样式*/ color:#40a0ee; height:80rpx; line-height:80rpx; border-bottom:3rpxsolid#40a0ee; }
js代码:
Page({ data:function(){ varmodel={}; model.pageVariable={ curSelectedItemId:'0',//顶部导航栏,当前选中的项 isFloat:false,//控制导航栏浮动 } returnmodel; }(), /** *选择导航 */ selectNavigationItem:function(e){ this.setData({ 'pageVariable.curSelectedItemId':e.currentTarget.dataset.id, 'pageVariable.isFloat':false }); wx.pageScrollTo({ scrollTop:0, }); this.initData(e.currentTarget.dataset.id);//加载数据 }, onPageScroll:function(res){ if(res.scrollTop>=1){//开始滚动 if(!this.data.pageVariable.isFloat){ this.setData({ 'pageVariable.isFloat':true }); } }else{ this.setData({ 'pageVariable.isFloat':false }); } } })
总结:
这个功能的实现主要是通过onPageScroll页面注册函数来实现页面滚动,通过pageScrollToapi实现导航选项在被选中时返回到页面顶部。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。