写一个微信小程序滑动导航栏
时间: 2023-07-13 07:22:29 浏览: 42
好的,下面是一个简单的微信小程序滑动导航栏的代码示例:
```
<view class="container">
<view class="nav">
<view class="nav-item {{activeIndex == 0 ? 'active' : ''}}" bindtap="switchTab" data-index="0">Tab 1</view>
<view class="nav-item {{activeIndex == 1 ? 'active' : ''}}" bindtap="switchTab" data-index="1">Tab 2</view>
<view class="nav-item {{activeIndex == 2 ? 'active' : ''}}" bindtap="switchTab" data-index="2">Tab 3</view>
</view>
<view class="content">
<view class="tab {{activeIndex == 0 ? 'active' : ''}}">Tab 1 Content</view>
<view class="tab {{activeIndex == 1 ? 'active' : ''}}">Tab 2 Content</view>
<view class="tab {{activeIndex == 2 ? 'active' : ''}}">Tab 3 Content</view>
</view>
</view>
<style>
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.nav {
display: flex;
height: 50px;
background-color: #f1f1f1;
}
.nav-item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #666;
cursor: pointer;
}
.nav-item.active {
color: #333;
font-weight: bold;
border-bottom: 2px solid #333;
}
.content {
flex: 1;
display: flex;
flex-direction: column;
overflow-y: scroll;
}
.tab {
height: 100%;
display: none;
padding: 20px;
}
.tab.active {
display: block;
}
</style>
<script>
Page({
data: {
activeIndex: 0
},
switchTab: function(e) {
this.setData({
activeIndex: e.currentTarget.dataset.index
});
}
})
</script>
```
以上代码实现了一个包含三个选项卡的微信小程序,用户可以通过滑动导航栏或点击选项卡来切换内容。其中,`.nav` 和 `.nav-item` 是导航栏的样式,`.content` 和 `.tab` 是内容区域的样式。在 JavaScript 部分,我们使用了 `setData` 方法来更新 `activeIndex` 的值,从而实现了选项卡的切换。