【开发小记】vue2+elementUI实现搜索结果无限滚动（触底加载）展示

一、效果展示

### 二、展示部分框架搭建

首先分为两大部分，搜索部分，以及结果展示部分。搜索部分直接复用了elementUI的一些小组件，核心代码如下：

重点在于结果展示部分，下面详细拆解
template部分

        <div class="search_res" infinite-scroll-distance=10  v-infinite-scroll="load" infinite-scroll-disabled="scroll" infinite-scroll-immediate-check=false>
            <div class="content">
                <div class="main">
                    <el-row :gutter="20">
                        <el-col class="loveItem " :span="4" v-for="item in tableData" :key="item.user_id">
                            <el-card :body-style="{ padding: '0px' }">
                                <img :src="item.user_photo.split(',')[0]" class="image">
                                <div style="padding: 14px;">
                                <span>{{item.name}}span>
                                <div class="bottom clearfix">
                                    <p class="introduction">{{item.about_me}}p>
                                    <el-button type="text" class="button" @click="goto(item.user_id)">了解更多el-button>
                                div>
                                div>
                            el-card>
                        el-col>
                    el-row>
                div>
                <span v-if="flag">我也是有底线的~span>
            div>
        div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

其中.main包含的就是我们展示的人员相关的卡片，这个地方为了控制样式我多加了一层.content的div。然后这里有一个关键点，就是在最外层的那个div上要添加infinite相关的几个属性，其中是滚动触底后触发的函数。

css部分
首先是设置一个固定高度，让超出视觉范围的内容自动裁剪。接着添加第二个样式去除由于加载内容产生的滚动条。

三、逻辑部分

最相关的就是以下三个函数

        handleSearch(){
            // 根据搜索条件请求数据
            if(this.both_year_value1>this.both_year_value2){
                alert('出生日期范围不可颠倒！')
            }else{
                this.getUserList()
            }
            
        },
        getUserList() {
            if(!this.flag){
                let getUserData = {
                    both_year_start:this.both_year_value1,
                    both_year_end:this.both_year_value2,
                    height:this.height_value,
                    weight:this.weight_value,
                    sex:this.sex_value,
                    citys:this.city_value,
                    colleges:this.college_value,
                    page:this.page,
                    "limit":this.limit
                }
                this.scroll = true
                axios.post(path.SearchGetUsers,getUserData).then(
                    res=>{
                        this.page ++;
                        let receive = JSON.parse(JSON.stringify(res.data))
                        console.log(receive.data)
                        let newData = receive.data
                        if(newData.length<this.limit){
                            this.flag = true
                        }else{
                            this.tableData = [...this.tableData,...newData]
                            this.scroll = false
                        }
                    },err=>{
                    this.$message.error(err)
                    }
                );
            }
        },
        // 无限滚动组件的触发的函数
        load(){
            this.getUserList()
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

点击搜索按钮，调用handleSearch函数，然后去调用getUserList函数获取符合条件的相关信息。
其次就是滚动触发load函数，也会再次调用getUserList函数，实现滚动加载的效果
这里其实采用了分页加载的思想，每次请求除了带上请求条件，还带上了page和limit，从而获取到相应的数据。同时我们定义了一个flag用于控制是否还需要继续请求（初始化为false，让底部的span不出现，且继续发送请求获取新数据）。如果后台返回的数据小于limit证明以及没有新的数据会返回了，所以将flag改为true，用于控制展示模块底部的span元素展现。

后台模拟部分
由于处于接口调试阶段，用node搭建的简要的返回机制。
这里模拟只返回5页数据，小于5页的情况下，就直接返回指定数量的数据。超出五页的返回空，用来测试数据加载完毕的情况。