Vue 3 开发移动端搜索列表与导航栏组件

应用场景介绍

该代码适用于需要构建移动端搜索列表和底部导航栏界面的场景，例如电子商务、内容聚合等应用。

代码基本功能介绍

该代码实现了以下功能：

• 提供一个搜索栏，用户可输入关键词进行搜索。
• 提供两个下拉菜单，分别用于筛选电影类型和评分。
• 展示一个列表，包含搜索结果。
• 当列表滚动到底部时，自动加载更多结果。
• 底部包含一个导航栏，可切换至其他页面。

功能实现步骤及关键代码分析

1. 导入依赖

import { ref, onMounted } from 'vue'
import { BMap } from 'vue3-baidu-map-gl'
import * as echarts from 'echarts'
import { h } from "vue"
import { createComponent } from 'echarts-for-vue'
import { Calendar } from 'v-calendar'
import { Editor, Toolbar } from "@wangeditor/editor-for-vue"
import { onBeforeUnmount } from 'vue'

2. 定义状态变量

const genre = ref('All')
const rating = ref('All')
const genreOptions = ['All', 'Action', 'Adventure', 'Comedy', 'Drama', 'Fantasy', 'Horror', 'Mystery', 'Romance', 'Sci-Fi', 'Thriller']
const ratingOptions = ['All', '1', '2', '3', '4', '5']
const results = ref([])
const finished = ref(false)
const immediateCheck = ref(true)
const offset = ref(0)

3. 加载更多结果

const onLoadMore = () => {
  setTimeout(() => {
    results.value = [...results.value, ...Array(10).fill({
      id: offset.value + 1,
      name: `Item ${offset.value + 1}`,
      rating: Math.floor(Math.random() * 5) + 1,
      image: `https://source.unsplash.com/random/200x200`,
    })]
    offset.value += 10
    if (offset.value >= 100) {
      finished.value = true
    }
  }, 1000)
}

4. 监听页面加载完成

onMounted(() => {
  onLoadMore()
})

5. 导航栏

<van-tabbar :active="active" :fixed="true" class="bg-gray-900 text-white">
  <van-tabbar-item icon="home-o" to="/" />
  <van-tabbar-item icon="message-o" to="/chat" />
  <van-tabbar-item icon="video-o" to="/video" />
  <van-tabbar-item icon="contact-o" to="/contact" />
</van-tabbar>

总结与展望

在开发这段代码的过程中，我学到了如何使用 Vue 3 和一些常用的 UI 组件库来构建移动端界面。

未来，该卡片功能可以进一步扩展和优化，例如：

• 添加排序功能，允许用户按名称、评分或其他属性对结果进行排序。
• 实现搜索历史记录，方便用户快速查找以前的搜索内容。
• 优化加载性能，使用虚拟化列表或其他技术来提高滚动时的流畅度。