微客导航 » 文章资讯 » 微信小程序实现页面浮动导航

微信小程序实现页面浮动导航

2023-08-29 13:05:04 299

一、前言

做复杂的小程序就与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实现导航选项在被选中时返回到页面顶部。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

微信小程序实现页面浮动导航

热门推荐

随机推荐