介绍 & lt; view 类=& # 39;容器# 39;比;
& lt; view 类=& # 39;navigation {{pageVariable.isFloat ==, true ?,“float-navigation":““}} & # 39;比;
& lt;才能view 类=& # 39;{{policyFilter.curSelectNavigationItemFormate (pageVariable.curSelectedItemId”0“)}} & # 39;,数据id=& # 39; 0 & # 39;, catchtap=& # 39; selectNavigationItem& # 39;在全部& lt;/view>
& lt;才能view 类=& # 39;{{policyFilter.curSelectNavigationItemFormate (pageVariable.curSelectedItemId,“1“)}} & # 39;,数据id=& # 39; 1 & # 39;, catchtap=& # 39; selectNavigationItem& # 39;在保障中& lt;/view>
& lt;才能view 类=& # 39;{{policyFilter.curSelectNavigationItemFormate (pageVariable.curSelectedItemId,“2“)}} & # 39;,数据id=& # 39; 2 & # 39;, catchtap=& # 39; selectNavigationItem& # 39;祝辞已生效& lt;/view>
& lt;才能view 类=& # 39;{{policyFilter.curSelectNavigationItemFormate (pageVariable.curSelectedItemId,“3“)}} & # 39;,数据id=& # 39; 3 & # 39;, catchtap=& # 39; selectNavigationItem& # 39;在未生效& lt;/view>
,& lt;/view>
& lt;/view> .navigation {/*才能导航样式*/,宽度:100%;
,显示:flex;
justify-content:大敌;空间;
,对齐项目:中心;
,身高:80 rpx;
,背景颜色:# fff;
,字体大小:28 rpx;
,颜色:# 333;
,粗细:500;
,不必:inset 0, 0, 0, 0, rgba (0, 0, 0, 0.30);
}
,
.float-navigation {/*才能导航浮动起来的css */位置:大敌;固定;
,上图:0;
,z - index: 1000;
}
,
.navigation-item-selected {/*才能导航项选中的样式*/,颜色:# 40 a0ee;
,身高:80 rpx;
,行高:80 rpx;
,边界底部:3 rpx solid # 40 a0ee;
} 页面({
数据:才能function (), {
var 才能;model =, {};
model.pageVariable 才能=,{
,,curSelectedItemId: & # 39; 0 & # 39;,,//顶部导航栏,当前选中的项
,,isFloat:假的,,//控制导航栏浮动
,,}
return 才能;模型;
}(),/* *
*,才能选择导航
,*/,selectNavigationItem:函数(e) {
this.setData({才能
,,& # 39;pageVariable.curSelectedItemId& # 39;:, e.currentTarget.dataset.id,
,,& # 39;pageVariable.isFloat& # 39;:假的
,,});
wx.pageScrollTo({才能
,,,scrollTop: 0,
,,});
this.initData才能(e.currentTarget.dataset.id);,,//加载数据
},
,onPageScroll:函数(res) {
if 才能;(res.scrollTop 祝辞=,1){,//开始滚动
,,if (! this.data.pageVariable.isFloat) {
,,,this.setData ({
,,,,& # 39;pageVariable.isFloat& # 39;:没错
,,,});
,,}
}{其他才能
,,this.setData ({
,,,& # 39;pageVariable.isFloat& # 39;:假
,,});
,,}
,}
})
这篇文章主要介绍微信小程序如何实现页面浮动导航,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
<强>一、前言
做复杂的小程序就与web页面的区别原来越小了,一些web页面的功能会被要求添加到微信小程序页面中。
<强>二、功能
页面在滑动的时候顶部页面导航跟随滑动,当点击导航中的任意一项时返回页面顶部。
<强>三,实现
wxml代码:
wxs代码:
js代码:
以上是“微信小程序如何实现页面浮动导航”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
