步骤 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样式,确保卡片和标题栏看起来符合设计要求。