element-ui:el-autocomplete实现滚动触底翻页

简介: element-ui:el-autocomplete实现滚动触底翻页

需求描述

element-ui的 el-autocomplete 组件支持远程搜索输入建议,不过不能翻页,只能搜索到首页内容


要求实现下滑到底部的时候,触发翻页请求,查看更多结果


文档


Input 输入框 https://element.eleme.io/#/zh-CN/component/input

实现效果

image.png


实现思路

想办法监听到滚动事件,就能判断是否到达底部,然后进行page++ 搜索


通过自定义指令v-autocomplete-scroll 来监听滚动事件,需要注意事件的监听与移除监听


实现代码

<template>
  <el-autocomplete
    popper-class="mo-autocomplete"
    v-model="keyword"
    style="width: 300px"
    :fetch-suggestions="querySearch"
    :debounce="800"
    ref="autocomplete"
    v-autocomplete-scroll="handleScroll"
    placeholder="搜索"
    @blur="handleBlur"
  >
  </el-autocomplete>
</template>
<script>
import apiData from './data.json'
export default {
  name: '',
  props: {},
  computed: {},
  data() {
    return {
      page: 1,
      size: 20,
      keyword: '',
    }
  },
  directives: {
    'autocomplete-scroll': {
      bind(el, binding, vnode) {
        console.log('bind')
        // 此处为了简单,直接判断触底了
        function handleScroll(e) {
          let isBottom =
            e.target.clientHeight + e.target.scrollTop == e.target.scrollHeight
          if (isBottom && !vnode.context.loading) {
            binding.value()
          }
        }
        // 监听滚动
        let wrapDom = el.querySelector('.el-autocomplete-suggestion__wrap')
        el.__handleScroll__ = handleScroll
        el.__wrapDom__ = wrapDom
        wrapDom.addEventListener('scroll', handleScroll, false)
      },
      unbind(el, binding, vnode) {
        console.log('unbind')
        // 解除事件监听
        el.__wrapDom__.removeEventListener('scroll', el.__handleScroll__, false)
      },
    },
  },
  methods: {
    // 分页搜索
    async search(keywords) {
      console.log('page', this.page)
      let start = (this.page - 1) * this.size
      let end = start + this.size
      return apiData.slice(start, end)
    },
    // 焦点触发搜索第一页
    async querySearch(queryString, cb) {
      this.page = 1
      let list = await this.search(queryString)
      // 调用 callback 返回建议列表的数据
      cb(list)
    },
    // 滚动触发翻页
    async handleScroll() {
      console.log('handleScroll')
      // 限制翻页限度
      if (this.page > 20) {
        return
      }
      this.page++
      let list = await this.search(this.keywords)
      this.$refs['autocomplete'].$data.suggestions.push(...list)
    },
    handleBlur() {
      console.log('handleBlur')
      // 避免上次数据影响
      this.$refs['autocomplete'].$data.suggestions.splice(
        0,
        this.$refs['autocomplete'].$data.suggestions.length
      )
    },
  },
  created() {},
}
</script>
<style lang="less"></style>

测试数据 data.json


[
  { "value": "三全鲜食(北新泾店)", "address": "长宁区新渔路144号" },
  {
    "value": "Hot honey 首尔炸鸡(仙霞路)",
    "address": "上海市长宁区淞虹路661号"
  },
  {
    "value": "新旺角茶餐厅",
    "address": "上海市普陀区真北路988号创邑金沙谷6号楼113"
  },
  { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
  {
    "value": "胖仙女纸杯蛋糕(上海凌空店)",
    "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101"
  },
  { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
  {
    "value": "豪大大香鸡排超级奶爸",
    "address": "上海市嘉定区曹安公路曹安路1685号"
  },
  { "value": "茶芝兰(奶茶,手抓饼)", "address": "上海市普陀区同普路1435号" },
  { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
  { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
  { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
  { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
  {
    "value": "Monica摩托主题咖啡店",
    "address": "嘉定区江桥镇曹安公路2409号1F,2383弄62号1F"
  },
  {
    "value": "浮生若茶(凌空soho店)",
    "address": "上海长宁区金钟路968号9号楼地下一层"
  },
  { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },
  { "value": "CoCo都可(北新泾店)", "address": "上海市长宁区仙霞西路" },
  {
    "value": "快乐柠檬(神州智慧店)",
    "address": "上海市长宁区天山西路567号1层R117号店铺"
  },
  {
    "value": "Merci Paul cafe",
    "address": "上海市普陀区光复西路丹巴路28弄6号楼819"
  },
  {
    "value": "猫山王(西郊百联店)",
    "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306"
  },
  { "value": "枪会山", "address": "上海市普陀区棕榈路" },
  { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
  { "value": "钱记", "address": "上海市长宁区天山西路" },
  { "value": "壹杯加", "address": "上海市长宁区通协路" },
  {
    "value": "唦哇嘀咖",
    "address": "上海市长宁区新泾镇金钟路999号2幢(B幢)第01层第1-02A单元"
  },
  { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },
  {
    "value": "爱茜茜里(近铁广场)",
    "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"
  },
  {
    "value": "鲜果榨汁(金沙江路和美广店)",
    "address": "普陀区金沙江路2239号金沙和美广场B1-10-6"
  },
  { "value": "开心丽果(缤谷店)", "address": "上海市长宁区威宁路天山路341号" },
  { "value": "超级鸡车(丰庄路店)", "address": "上海市嘉定区丰庄路240号" },
  { "value": "妙生活果园(北新泾店)", "address": "长宁区新渔路144号" },
  { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },
  { "value": "凡仔汉堡(老真北路店)", "address": "上海市普陀区老真北路160号" },
  { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },
  { "value": "蜀香源麻辣香锅(剑河路店)", "address": "剑河路443-1" },
  { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },
  {
    "value": "饭典*新简餐(凌空SOHO店)",
    "address": "上海市长宁区金钟路968号9号楼地下一层9-83室"
  },
  {
    "value": "焦耳·川式快餐(金钟路店)",
    "address": "上海市金钟路633号地下一层甲部"
  },
  { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },
  { "value": "浏阳蒸菜", "address": "天山西路430号" },
  { "value": "四海游龙(天山西路店)", "address": "上海市长宁区天山西路" },
  {
    "value": "樱花食堂(凌空店)",
    "address": "上海市长宁区金钟路968号15楼15-105室"
  },
  { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },
  {
    "value": "福荣祥烧腊(平溪路店)",
    "address": "上海市长宁区协和路福泉路255弄57-73号"
  },
  {
    "value": "速记黄焖鸡米饭",
    "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位"
  },
  { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },
  { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },
  { "value": "阳阳麻辣烫", "address": "天山西路389号" },
  {
    "value": "南拳妈妈龙虾盖浇饭",
    "address": "普陀区金沙江路1699号鑫乐惠美食广场A13"
  }
]
相关文章
|
API Android开发 iOS开发
web: 手机键盘自动获取短信验证码,点击自动填充输入框
web: 手机键盘自动获取短信验证码,点击自动填充输入框
1166 0
|
安全 jenkins 持续交付
Jenkins针对不同的项目视图对不同的用户进行权限分配
Jenkins创建用户并分配不同视图的权限 根据不同的部门分配不同的角色,角色成员只能看到自己部门视图内部的jenkins job Jenkins版本:2.249 因安装了中文包的原因,语言大多以中文的方式显示,但不影响配置使用
2207 0
Jenkins针对不同的项目视图对不同的用户进行权限分配
|
8月前
|
机器学习/深度学习 人工智能 算法
基于Python深度学习的【蘑菇识别】系统~卷积神经网络+TensorFlow+图像识别+人工智能
蘑菇识别系统,本系统使用Python作为主要开发语言,基于TensorFlow搭建卷积神经网络算法,并收集了9种常见的蘑菇种类数据集【"香菇(Agaricus)", "毒鹅膏菌(Amanita)", "牛肝菌(Boletus)", "网状菌(Cortinarius)", "毒镰孢(Entoloma)", "湿孢菌(Hygrocybe)", "乳菇(Lactarius)", "红菇(Russula)", "松茸(Suillus)"】 再使用通过搭建的算法模型对数据集进行训练得到一个识别精度较高的模型,然后保存为为本地h5格式文件。最后使用Django框架搭建了一个Web网页平台可视化操作界面,
620 11
基于Python深度学习的【蘑菇识别】系统~卷积神经网络+TensorFlow+图像识别+人工智能
|
3月前
|
搜索推荐 Python
为啥说选择排序是不稳定的
选择排序是一种简单但不稳定的排序算法。它通过每轮选择最小元素并交换位置来实现排序,但这种交换可能破坏相同值元素的相对顺序。例如对数组 `[5, 8, 5, 2]` 排序后,两个 `5` 的顺序会发生变化,从而证明其不稳定性。
179 0
|
7月前
|
机器学习/深度学习 算法 机器人
强化学习:时间差分(TD)(SARSA算法和Q-Learning算法)(看不懂算我输专栏)——手把手教你入门强化学习(六)
本文介绍了时间差分法(TD)中的两种经典算法:SARSA和Q-Learning。二者均为无模型强化学习方法,通过与环境交互估算动作价值函数。SARSA是On-Policy算法,采用ε-greedy策略进行动作选择和评估;而Q-Learning为Off-Policy算法,评估时选取下一状态中估值最大的动作。相比动态规划和蒙特卡洛方法,TD算法结合了自举更新与样本更新的优势,实现边行动边学习。文章通过生动的例子解释了两者的差异,并提供了伪代码帮助理解。
434 2
|
网络协议 算法 Linux
通过实验深入了解 TCP 数据的发送和接收
本系列文章是组内写给新人和实习生的 TCP入门系列教程,结合了理论和实践,本篇为第二篇,建议先读上篇《通过实验深入了解TCP 连接的建立和关闭》。
|
12月前
|
Java
将本地的文件(图片,文本等)返回给客户端
本文详细介绍了如何在SpringBoot项目中,通过`WebMvcConfigurer`接口和`addResourceHandlers`方法配置静态资源处理器,以处理特定路径下的资源,如/images/swiper/的图片。
139 0
将本地的文件(图片,文本等)返回给客户端
|
监控 Ubuntu
如何在 Ubuntu 22.04 LTS 上安装 Logwatch?
如何在 Ubuntu 22.04 LTS 上安装 Logwatch?
155 0
|
存储 定位技术 数据中心
探索现代数据中心的冷却技术革新
在这篇文章中,我们将深入探讨现代数据中心冷却技术的最新进展。随着数据量的激增和计算能力的提升,数据中心的能效和散热问题变得日益重要。文章将介绍几种创新的冷却方法,包括液冷系统、热管技术和环境冷却集成设计,并讨论它们的工作原理、优势以及面临的挑战。通过这些技术的比较,我们旨在为数据中心管理者提供决策支持,以实现更高效、可持续的运营。
340 1
|
分布式计算 Hadoop Linux
HDFS的常用命令
HDFS的常用命令
210 0