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

微信(小程序)  /  管理员 发布于 5年前   652

一、前言

做复杂的小程序就与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: inset 0 0 0 0 rgba(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: 3rpx solid #40a0ee;}

js代码：

Page({  data:function () {  var model = {};  model.pageVariable = {   curSelectedItemId:'0', //顶部导航栏，当前选中的项   isFloat:false, //控制导航栏浮动  }  return model; }(), /**  * 选择导航  */ 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页面注册函数来实现页面滚动，通过pageScrollTo api实现导航选项在被选中时返回到页面顶部。

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

您可能感兴趣的文章:

• 微信小程序 （三）tabBar底部导航详细介绍
• 微信小程序 配置顶部导航条标题颜色的实现方法
• 微信小程序中进行地图导航功能的实现方法
• 微信小程序教程系列之设置标题栏和导航栏（7）
• 微信小程序 开发之顶部导航栏实例代码
• 微信小程序顶部可滚动导航效果
• 微信小程序中顶部导航栏的实现代码
• 详解微信小程序设置底部导航栏目方法
• 微信小程序 wxapp导航 navigator详解
• 微信小程序自定义导航隐藏和显示功能