uniapp列表写法

### 实现 UniApp 列表展示 在 UniApp 中实现列表展示通常涉及使用 `v-for` 指令来遍历数组并渲染列表项。以下是几种常见的方法和示例代码。 #### 使用 v-for 渲染静态列表 对于简单的静态列表，可以直接在模板中定义数据并通过 `v-for` 进行循环： ```html <template> <view class="list"> <block v-for="(item, index) in listItems" :key="index"> <text>{{ item }}</text> </block> </view> </template> <script> export default { data() { return { listItems: ['Item 1', 'Item 2', 'Item 3'] }; } }; </script> ``` 此方式适用于不需要动态加载或复杂交互的场景[^3]。 #### 结合 API 请求显示动态列表 当需要从服务器获取数据时，可以通过异步请求更新本地状态，并利用 `v-if` 控制视图的显示逻辑： ```javascript // main.js 或 utils/request.js 配置 @escook/request-miniprogram import request from '@escook/request-miniprogram' request.setBaseURL('https://api.example.com') export function fetchListData(params) { return request({ url: '/items', method: 'GET', params, }) } ``` 页面组件内发起请求并处理返回的数据： ```html <template> <scroll-view scroll-y style="height: 100%;"> <view v-if="loading">Loading...</view> <view v-else> <block v-for="(item, idx) in items" :key="idx"> <navigator :url="'/pages/detail?id=' + item.id">{{ item.title }}</navigator> </block> </view> </scroll-view> </template> <script> import { onLoad } from '@dcloudio/uni-app' import { ref, onMounted } from 'vue' import { fetchListData } from '@/utils/api' export default { setup() { const loading = ref(true); const items = ref([]); async function loadItems() { try { const response = await fetchListData(); items.value = response.data; } catch (error) { console.error(error.message); } finally { loading.value = false; } } onMounted(() => { loadItems(); }); return { loading, items, }; }, }; </script> ``` 这段代码展示了如何结合 HTTP 客户端库发送 GET 请求以获得远程资源，并将其映射成可视化的条目集合[^4]。 #### 封装可重用的列表组件 为了提高代码复用性和维护效率，推荐将通用功能抽象出来形成独立组件。例如创建名为 `<my-list>` 的 Web Components 来管理特定类型的列表呈现： ```html <!-- components/my-list/index.vue --> <template> <ul> <li v-for="item in props.items" :key="item.id"> {{ item.name }} </li> </ul> </template> <script lang="ts"> import { defineComponent, PropType } from "vue"; interface Item { id: number; name: string; } export default defineComponent({ props: { items: Array as PropType<Item[]> } }); </script> ``` 之后可以在其他地方轻松导入该组件并传递所需参数： ```html <template> <!-- pages/home/index.vue --> <my-list :items="data"></my-list> </template> <script> import MyList from "@/components/my-list"; ... </script> ``` 这种模式有助于保持项目的模块化结构，同时也便于团队协作开发[^2].