这篇博客介绍了如何在微信小程序中创建一个简单的navbar。通过wxml设置视图结构，wxss定义样式，使navbar具有灵活的布局和交互效果，如切换选中状态。js部分展示了数据绑定和事件监听，用于更新当前选中的navbar项。
wxml：
<view class="navbar">
<view class="navbar-item" wx:for="{
{navbar}}" wx:for-index="idx" data-idx="{
{idx}}" bindtap="swichNav">
<text class="navbar-text {
{currentNavbar==idx ? 'active' : ''}}">{
{item}}</text>
</view>
</view>
xxss：
.navbar {
display: flex;
border-bottom: 1px solid #eee;
}
.navbar-item {
flex: 1.0;
text-align: center;
font-size: 14px;
color: #999;
margin-bottom: -1px;
}
.navbar-text {
display: block;
width: 80px;
padding: 10px;
margin: auto;
}
.navbar-text.active {
border-bottom: 2px
最低0.47元/天 解锁文章
扫一扫
775
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
