Vant （List组件）和下拉菜单（DropdownMenu）实现数据切换导致界面数据异常的解决办法以及问题所在。

一、实现功能（移动端）

    界面需要实现一个下拉列表（vant List列表）并在头部加入可以切换类型的下拉菜单（vant DropdownMenu）

二、List的问题点

  List 组件通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。

   需要注意点：1.只要触底 组件会自动响应load事件 并 自动将loading设置为true类型 只要loading   为true就会不断的触发load事件

                         2.只要数据没有填充占满容器高度，也会导致load事件不断被触发，陷入循环不会  停止，这就会因为如果是赋值错误或者空数据造成陷入死循环。

                          （滚动条与底部距离小于 offset 时触发Load事件 offset默认值300）

三、下拉组件切换数据源，导致界面响应数据异常

        1.问题出现的原因

           （1）数据列表没有进行重置、清空，因为你是获取特重新获取特定条件的数据源且

                   你的List数据列表是通过分页数据进行拼接的 不做清空会导致数据残留！！

           （2）没有设置loading为true 因为List列表数据如果没有填满会一直调用load事件

                     为什么会没有占满，因为第一点做了数据清空，所以会引发load事件

                   （第二大点的注意小点有提到为什么空数据会造成load事件被调用），

所以需要通过将loading的状 态置为true，数据调用loading状态转变之前都不触发load！！

                  （是否处于加载状态，加载过程中不触发load事件 注：引用官网文档原话）

           （3）没有重置页码 页码是为了接收分页数据做下拉数据的传入参数 因为你是重新请求全    新数据 页码数未重置会导致你的数据请求分页错误 所以需要重置为第一页

           （4）没有重置finished状态 同样是因为请求全新数据 需要重置之前所有被改变的状态

        1.切换组件的点击事件 (部门代码) 切换数据类型的回调

         change（）{

               this.loading= true  // 这是一个特殊点 处于加载状态 不调用load事件 防止多次调用

               this.finished = false

               this.list = []

               this.pageNum = 1

               this.onLoad()  //  调用一次load事件请求数据做数据请求

          }