十行JS代码实现下拉滑动懒加载数据

2023-10-31 00:42:34

引言

　　在实际项目中，我们经常需要用到下拉框，比如选择国家/城市、选择商品分类等。当下拉框的数据量很大时，为了提高页面性能，我们可以使用懒加载技术。懒加载是指只在需要的时候才加载数据，这样可以减少页面的加载时间。

　　本文将介绍如何使用vue自定义组件实现下拉框的懒加载。

实现步骤

　　1. 创建vue自定义组件

　　首先，我们需要创建一个vue自定义组件。组件的名称可以是任何你想要的，这里我们使用select-lazyload。

　　　　// select-lazyload.vue 　　<template> 　　 <select @scroll="handleScroll"> 　　 <slot></slot> 　　 </select> 　　</template> 　　　　<script> 　　export default { 　　 data() { 　　 return { 　　 currentPage: 1, 　　 isLoading: false, 　　 isFinished: false, 　　 } 　　 }, 　　 methods: { 　　 handleScroll(e) { 　　 const el = e.target 　　 if (el.scrollTop + el.clientHeight >= el.scrollHeight) { 　　 if (!this.isLoading && !this.isFinished) { 　　 this.currentPage++ 　　 this.isLoading = true 　　 this.$emit('load-more', this.currentPage) 　　 } 　　 } 　　 }, 　　 }, 　　} 　　</script> 　　

　　2. 使用vue自定义组件

　　接下来，我们需要在父组件中使用select-lazyload组件。

　　　　<template> 　　 <select-lazyload @load-more="loadMore"> 　　 <option v-for="item in options" :key="item.value" :value="item.value">{{ item.label }}</option> 　　 </select-lazyload> 　　</template> 　　　　<script> 　　import SelectLazyload from './select-lazyload.vue' 　　　　export default { 　　 components: { 　　 SelectLazyload, 　　 }, 　　 data() { 　　 return { 　　 options: [], 　　 } 　　 }, 　　 methods: { 　　 loadMore(currentPage) { 　　 this.isLoading = true 　　 // 在这里请求数据　　 setTimeout(() => { 　　 this.options = this.options.concat([ 　　 { value: 1, label: '选项 1' }, 　　 { value: 2, label: '选项 2' }, 　　 { value: 3, label: '选项 3' }, 　　 ]) 　　 this.isLoading = false 　　 }, 1000) 　　 }, 　　 }, 　　} 　　</script> 　　

　　3. 效果展示

　　当下拉框的数据量很大时，使用懒加载技术可以大大提高页面的性能。

　　以下是一个效果演示：

　　演示地址