微信小程序 开发之顶部导航栏实例代码

网友投稿 430 2023-11-11

微信小程序 开发之顶部导航栏

微信小程序 开发之顶部导航栏实例代码

需求：顶部导航栏

效果图：

wxml：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!--导航条-->
<view class="navbar">
<text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? active : }}" wx:key="unique" bindtap="navbarTap">{{item}}</text>
</view>
<!--首页-->
<view hidden="{{currentTab!==0}}">
tab_01
</view>
<!--搜索-->
<view hidden="{{currentTab!==1}}">
tab_02
</view>
<!--我-->
<view hidden="{{currentTab!==2}}">
tab_03
</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
26
27
28
29
page{
display: flex;
flex-direction: column;
height: 100%;
}
.navbar{
flex: none;
display: flex;
background: #fff;
}
.navbar .item{
position: relative;
flex: auto;
text-align: center;
line-height: 80rpx;
}
.navbar .item.active{
color: #FFCC00;
}
.navbar .item.active:after{
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4rpx;
background: #FFCC00;
}

js：

运行：

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

您可能感兴趣的文章:微信小程序教程系列之设置标题栏和导航栏(7)详解微信小程序设置底部导航栏目方法微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题微信小程序顶部导航栏滑动tab效果详解微信小程序胶囊按钮返回|首页自定义导航栏功能微信小程序中顶部导航栏的实现代码微信小程序自定义navigationBar顶部导航栏适配所有机型（附完整案例）微信小程序实战之顶部导航栏(选项卡)(1)微信小程序实现左侧滑动导航栏微信小程序实现左侧导航栏

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

标签：程序 代码 微信小程序 实例 小程序
上一篇:原生微信小程序开发中 redux 的使用详解
下一篇:微信小程序实现云开发上传文件、图片功能
相关文章

 发表评论

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