element-ui select 滚动翻页（远程）

F N Nancy

已于 2022-04-15 19:45:14 修改

阅读量1.7k

点赞数 1

分类专栏：笔记 elementui 文章标签： vue.js 前端

于 2022-04-15 19:44:17 首次发布

本文链接：https://blog.csdn.net/NancyFyn/article/details/124197903

版权

笔记同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

elementui

11 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue.js应用中实现滚动条翻页功能，通过创建一个自定义指令并在main.js中全局注册，监听滚动事件。当用户滚动到页面底部时，会触发接口调用，加载更多数据。示例代码展示了如何在Vue组件中使用该指令，结合远程搜索功能，动态加载el-select组件的选项数据。

摘要由CSDN通过智能技术生成

此方法中，后端返回的数据是做了分页的，只需要在展示的时候做数据整合。

关于滚动条翻页，可以写一个公用方法

1 、新增一个js文件：directive.js

import Vue from 'vue'
export default () => {
  Vue.directive('scroll', {
    bind(el, binding) {
      // 获取滚动页面DOM
      const SCROLL_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
      let scrollPosition = 0
      SCROLL_DOM.addEventListener('scroll', function() {
        // 当前的滚动位置 减去  上一次的滚动位置
        // 如果为true则代表向上滚动，false代表向下滚动
        const flagToDirection = this.scrollTop - scrollPosition > 0
        // 记录当前的滚动位置
        scrollPosition = this.scrollTop
        const LIMIT_BOTTOM = 0
        // 记录滚动位置距离底部的位置
        const scrollBottom = this.scrollHeight - (this.scrollTop + this.clientHeight) <= LIMIT_BOTTOM
        // 如果已达到指定位置则触发
        if (scrollBottom) {
          // 将滚动行为告诉组件
          binding.value(flagToDirection)
        }
      })
    }
  })
}

2 、在 main.js 全局引用

import Directives from './directives' （具体看新建文件位置）

Vue.use(Directives)

3、在页面使用方法

<el-select
    filterable
    remote
    v-scoll="val=> handleScoll(val, 'cItem')"
    :remote-method="remoteChang"
    @focus="changeFocus"
>
    <el-opetion
        v-for="item in List"
        key="item.id"
        :label="item.name"
        :value='item.id'
    ></el-opetion>
</el-select>

<script>
    export default {
        data() {
            return {
                pageNum : 1,

            }    
        },
        methods: {
            // 远程搜索关键字
            remoteChange (query = '') {
                // 重新赋值
                this.query = query
                // 关键字为空
                 if (query) {
                        this.list = []
                        this.pageNum = 1
                   }
                // 调用接口
                    this.xxx(query)
                },
            // 接口方法
             xxx(query) {
                let obj = {pageNum: this.pageNum}
                // 接口
                jiekou(obj).then(res=>{
                    //成功
                    ...
                    ...
                    ...
                    // 整合数组
                    this.List = this.pageNum === 1 ? data.list : this.List.concat(data.list)
                    // 获取总页数
                    this.totlePages = data.pages
                 }).catch(error=>{
                    this.$message.error(error.message)
                 })
                },
            // 滚动条滚动
            handleScroll (val) {
                if (val) {
                    if (this.totlePages > this.pageNum) {
                        // 总页码大于 当前页码，滚动页码加1
                        this.pageNum += 1
                        // 滚动调用接口
                        this.xxx(this.query)
                    }
                }
            },
            // 聚焦是获取数据，需把关键字置空
            changeFocus() {
                this.pageNum = 1
                this.query = null
                // 掉接口
                this.xxx()
            },
        }
     }    


</script>