uniapp列表

### UniApp 列表功能实现 在 UniApp 中，列表功能可以通过多种方式实现，具体取决于需求场景以及数据结构的设计。以下是基于 Vue.js 的模板语法和组件化设计来展示如何实现动态渲染列表。 #### 基本列表渲染 通过 `v-for` 指令可以轻松实现列表项的循环渲染： ```html <template> <view class="list-container"> <block v-for="(item, index) in listData" :key="index"> <view class="list-item">{{ item.name }}</view> </block> </view> </template> <script> export default { data() { return { listData: [ { name: 'Item 1' }, { name: 'Item 2' }, { name: 'Item 3' } ] }; } }; </script> <style> .list-container { padding: 20px; } .list-item { margin-bottom: 10px; font-size: 16px; } </style> ``` 上述代码展示了如何使用 `v-for` 渲染一个简单的静态列表[^4]。 --- #### 动态加载更多（分页） 对于大数据量的情况，通常会采用分页或者滚动加载的方式优化性能。以下是一个基本的滚动加载示例： ```javascript <template> <scroll-view scroll-y @scrolltolower="loadMore" class="scroll-list"> <view v-for="(item, index) in listData" :key="index" class="list-item"> {{ item.name }} </view> <view v-if="loading" class="loading-text">正在加载...</view> </scroll-view> </template> <script> export default { data() { return { listData: [], page: 1, pageSize: 10, loading: false }; }, onLoad() { this.fetchData(); }, methods: { fetchData() { if (this.loading) return; this.loading = true; setTimeout(() => { const newData = Array.from({ length: this.pageSize }, (_, i) => ({ name: `Item ${(this.page - 1) * this.pageSize + i}` })); this.listData.push(...newData); this.page++; this.loading = false; }, 1000); }, loadMore() { this.fetchData(); } } }; </script> <style> .scroll-list { height: calc(100vh - 100px); } .list-item { padding: 10px; border-bottom: 1px solid #ccc; } .loading-text { text-align: center; color: gray; } </style> ``` 此代码实现了当用户滑动到底部时自动触发加载更多的逻辑[^5]。 --- #### 结合模糊搜索与高亮显示 如果需要实现在列表中支持模糊搜索并高亮匹配关键字的功能，则可参考如下方法： ```html <template> <view> <input type="text" placeholder="请输入关键词..." v-model="searchKeyword" /> <view v-for="(item, index) in filteredList" :key="index" class="list-item"> <rich-text :nodes="highlight(item.name)"></rich-text> </view> </view> </template> <script> export default { data() { return { searchKeyword: '', originalList: ['Apple', 'Banana', 'Orange', 'Grapes'], highlightStyle: '<span style="color:red;">{{keyword}}</span>' }; }, computed: { filteredList() { if (!this.searchKeyword.trim()) return this.originalList; return this.originalList.filter((item) => item.toLowerCase().includes(this.searchKeyword.toLowerCase()) ); } }, methods: { highlight(text) { if (!this.searchKeyword) return text; const regex = new RegExp(`(${this.searchKeyword})`, 'gi'); return text.replace(regex, `<strong>$1</strong>`); // 自定义样式 } } }; </script> <style> .list-item { padding: 10px; border-bottom: 1px solid #eee; } </style> ``` 该部分结合了引用中的模糊搜索概念[^2]，并通过正则表达式对匹配到的关键字进行了特殊样式的处理。 --- #### 总结 以上分别介绍了 UniApp 中基础列表渲染、带分页效果的大规模数据加载以及带有模糊查询能力的高级列表应用案例。这些技术能够满足大多数实际项目的需求，并可根据业务复杂度进一步扩展功能。