虚拟加载 vue-virtual-scroller 解决大数据加载过多，卡顿问题

项目场景：

手机端数据过200条，input框点击输入就卡死！原因加载的节点太多了！
思路：页面显示的数据只有少部分，其他的都隐藏掉！

解决方案：vue-virtual-scroller 解决加载过多，卡顿问题

安装命令

npm install --save vue-virtual-scroller

main.js引入 注意css文件引入，不然页面上需要import组件，样式才起作用

import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import VueVirtualScroller from 'vue-virtual-scroller'
Vue.use(VueVirtualScroller);

RecycleScroller 使用 需要设定高度
注意：

1. key-field，默认值是id
2. items就是你的数据源
3. RecycleScroller外层，需要设置高度
4. 需要设定每个item的高度，item-size
5. 设计原理，计算滚动条的位置，不在屏幕的item，设置transform，移走
6. 缺点，每个item，设置高度，有的item高度不够，会有空白

效果图如下：

<!--需要固定死高度-->
<RecycleScroller
  class="scroller" //样式
  :items="dataList" //数据源
  :item-size="110" //每个item的高度
  key-field="id" //标识key
  v-slot="{ item,index }">
  <div style="height: 100%;padding: 0 0px;display: flex;align-items: center;">
    <van-swipe-cell style="width: 100%;">
      <van-panel style="font-size: 14px">
        <div slot="header" class="content-pannel-vanrow">
          <van-row>
            <van-col span="8" style="color: gray">表code：</van-col>
            <van-col span="16">{{item.tableCode}}</van-col>
          </van-row>
          <van-row>
            <van-col span="8" style="color: gray">id：</van-col>
            <van-col span="16">{{item.id}}</van-col>
          </van-row>
          <van-row>
            <van-col span="8" style="color: gray">字段code：</van-col>
            <van-col span="16">{{item.columnCode}}</van-col>
          </van-row>
          <van-row v-if="item.columnName !=null && item.columnName!=undefined && item.columnName !='预留字段'">
            <van-col span="8" style="color: gray">字段名：</van-col>
            <van-col span="16">
              <van-field @focus="$tools.inputFocusStyle" @blur="$tools.inputBlurStyle" class="full-input-border green-num"
                         v-model="item.columnName" placeholder="" @change="test(item.columnCode)"></van-field>
            </van-col>
          </van-row>
        </div>
      </van-panel>
      <template slot="right">
        <van-button square type="danger" text="删除" style="height: 100%" @click="remove(index)"/>
      </template>
    </van-swipe-cell>
  </div>
</RecycleScroller>


//style样式 样式可以直接写标签上
.scroller {
  height: 100%;
  overflow-y: scroll;
}

.user {
  height: 100%;
  padding: 0 0px;
  display: flex;
  align-items: center;
}

DynamicScroller 自适应高度
注意：

1. key-field，默认值是id
2. 其他同上，优势是自适应高度了

<DynamicScroller
  :items="dataList" //数据源
  :min-item-size="80" //最小高度
  key-field="id" //标识key
  style="height: 100%;" //设置高度与外层一致
  > 
  <template v-slot="{ item, index, active }">
    <DynamicScrollerItem
      :item="item"
      :active="active"
      :size-dependencies="[item.id,]" //与标识一致即可
      :data-index="index">
      <div class="user">
        <van-swipe-cell style="width: 100%;">
          <van-panel style="font-size: 14px">
            <div slot="header" class="content-pannel-vanrow">
              <van-row>
                <van-col span="8" style="color: gray">表code：</van-col>
                <van-col span="16">{{item.tableCode}}</van-col>
              </van-row>
              <van-row>
                <van-col span="8" style="color: gray">id：</van-col>
                <van-col span="16">{{item.id}}</van-col>
              </van-row>
              <van-row>
                <van-col span="8" style="color: gray">字段code：</van-col>
                <van-col span="16">{{item.columnCode}}</van-col>
              </van-row>
              <van-row v-if="item.columnName !=null && item.columnName!=undefined && item.columnName !='预留字段'">
                <van-col span="8" style="color: gray">字段名：</van-col>
                <van-col span="16">
                  <van-field @focus="$tools.inputFocusStyle" @blur="$tools.inputBlurStyle" class="full-input-border green-num"
                             v-model="item.columnName" placeholder="" @change="test(item.columnCode)"></van-field>
                </van-col>
              </van-row>
            </div>
          </van-panel>
          <template slot="right">
            <van-button square type="danger" text="删除" style="height: 100%" @click="remove(index)"/>
          </template>
        </van-swipe-cell>
      </div>
    </DynamicScrollerItem>
  </template>
</DynamicScroller>

效果图如下

dataList数据是后台查的，这里加载1000条，操作数据，滑动，样式都是没问题的！

写在最后

若对你有用，微信扫码，点赞关注更多技术分享！