Vue 3 开发移动端获奖者列表页面

应用场景

在移动应用中，经常需要展示获奖者列表，例如竞赛或活动中的获胜者。本代码示例演示了如何使用 Vue 3 和 Vant UI 组件开发一个获奖者列表页面。

基本功能

此代码的主要功能包括：

• 展示今日和历史获奖者列表
• 切换今日和历史获奖者列表
• 点击获奖者条目跳转到详情页面

功能实现步骤

1. 初始化数据

在 <script> 标签中，我们使用 ref 初始化了以下数据：

const activeTab = ref("today");
const isAllTime = ref(false);
const todayWinners = ref([...]);
const allTimeWinners = ref([...]);

2. 切换标签

我们使用 @click 事件监听器在导航栏中切换标签：

<van-nav-bar
  @click-left="switchTab"
  @click-right="switchTab"
/>

在 switchTab 方法中，我们更新 activeTab 和 isAllTime 的值：

const switchTab = (tab) => {
  activeTab.value = tab;
  isAllTime.value = tab === "allTime";
};

3. 展示获奖者列表

我们使用 v-if 和 v-else 根据 activeTab 的值展示不同的获奖者列表：

<van-list v-if="activeTab === 'today'">
  <!-- 今日获奖者列表 -->
</van-list>
<van-list v-else>
  <!-- 历史获奖者列表 -->
</van-list>

4. 点击获奖者条目跳转到详情页面

我们使用 @click 事件监听器在获奖者条目上跳转到详情页面：

<van-cell @click="goToDetail(item.id)">
  <!-- 获奖者条目 -->
</van-cell>

在 goToDetail 方法中，我们使用 uni.navigateTo 跳转到详情页面：

const goToDetail = (id) => {
  uni.navigateTo({
    url: `/pages/winner-detail/winner-detail?id=${id}`,
  });
};

总结与展望

开发这段代码的过程让我们深入了解了 Vue 3 的响应式系统和 Vant UI 组件的强大功能。未来，我们可以通过以下方式扩展和优化此功能：

• 添加对其他类型的获奖者列表的支持，例如按类别或地区
• 实现搜索功能以快速查找获奖者
• 集成社交分享功能以允许用户分享获奖者信息