微信小程序实现标签导航

步骤 1: 定义数据模型

首先，在小程序的Page对象中定义一个变量，用于控制显示哪个卡片。
Page({ data: { currentTab: 0, // 默认显示第一个卡片 tabs: ['卡片1', '卡片2', '卡片3'] // 卡片标题数组 }, });

步骤 2: 创建卡片模板

在小程序的wxml文件中，为每个卡片创建一个独立的结构，并使用wx:if或hidden属性来控制其显示与隐藏
<view class="tab-bar"> <block wx:for="{{tabs}}" wx:key="*this"> <view class="tab-item" bindtap="switchTab" data-tab-index="{{index}}" :class="currentTab === index ? 'active' : ''" >{{item}}</view> </block> </view> <view wx:for="{{tabs}}" wx:key="*this" :style="currentTab === index ? 'display: block;' : 'display: none;'"> <view wx:if="{{currentTab === 0}}">这是卡片1的内容</view> <view wx:if="{{currentTab === 1}}">这是卡片2的内容</view> <view wx:if="{{currentTab === 2}}">这是卡片3的内容</view> </view>

步骤 3 ：添加切换逻辑

在Page对象中定义一个方法，当点击卡片标题时调用此方法来切换显示的卡片。
methods: { switchTab(e) { const index = e.currentTarget.dataset.tabIndex; this.setData({ currentTab: index }); } }

样式调整：

最后，根据需要调整CSS样式，确保卡片和标题栏看起来符合设计要求。