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

网友投稿 538 2023-11-12

一、前言

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

做复杂的小程序就与web页面的区别原来越小了，一些web页面的功能会被要求添加到微信小程序页面中。

二、功能

页面在滑动的时候顶部页面导航跟随滑动，当点击导航中的任意一项时返回页面顶部。

三、实现

wxml代码：

?
1
2
3
4
5
6
7
8
<view class=container>
<view class=navigation {{pageVariable.isFloat == true ? "float-navigation":""}}>
<view class={{policyFilter.curSelectNavigationItemFormate(pageVariable.curSelectedItemId,"0")}} data-id=0 catchtap=selectNavigationItem>全部</view>
<view class={{policyFilter.curSelectNavigationItemFormate(pageVariable.curSelectedItemId,"1")}} data-id=1 catchtap=selectNavigationItem>保障中</view>
<view class={{policyFilter.curSelectNavigationItemFormate(pageVariable.curSelectedItemId,"2")}} data-id=2 catchtap=selectNavigationItem>已生效</view>
<view class={{policyFilter.curSelectNavigationItemFormate(pageVariable.curSelectedItemId,"3")}} data-id=3 catchtap=selectNavigationItem>未生效</view>
</view>
</view>

wxss代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.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代码：

总结：

这个功能的实现主要是通过onPageScroll页面注册函数来实现页面滚动，通过pageScrollTo api实现导航选项在被选中时返回到页面顶部。

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

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 实例 代码
上一篇:微信小程序封装网络请求和拦截器实战步骤
下一篇:微信小程序与公众号实现数据互通的方法
相关文章

 发表评论

暂时没有评论，来抢沙发吧~