海量数据无限下拉列表vue-virtual-scroller

最新推荐文章于 2024-07-02 15:21:39 发布
最新推荐文章于 2024-07-02 15:21:39 发布
阅读量1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dongheng123/article/details/119351614
版权

demo示例地址https://akryum.github.io/vue-virtual-scroller/# 仓库地址https://github.com/Akryum/vue-virtual-scroller

<template>
  <div
    class="recycle-scroller-demo"
    :class="{
      'page-mode': pageMode,
      'full-page': pageModeFullPage,
    }"
  >
  <div class="container">
    <!-- <div class="header-search-wrap">
      <div>
         <span class="text-style">时间范围</span>
              <el-date-picker
                v-model="searchObj.timevalue"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
      </div>
      <div>
        <span v-if="type != 'PARK'" class="text-style">所属区域</span>
          <el-cascader
            v-if="type !== 'PARK'"
            class="my-style"
            popper-class="site-cascader"
            style="width: 200px;height:36px;margin-right:10px"
            ref="casca"
            size="small"
            v-model="searchObj.treeIds"
            :options="treeData"
            :props="{ checkStrictly: false, value: 'id', label: 'name', children: 'childInfoVOList', emitPath: false, multiple: true }"
            clearable>
          </el-cascader>
      </div>
      <div>
         <span class="text-style">项目名称</span>
         <el-input clearable v-model="searchObj.corpName" placeholder="搜索项目名称" width="200"></el-input>
      </div>
      <div>
          <span class="text-style" style="line-height: 36px;">污染程度</span><el-select v-model="searchObj.deviceStatus" placeholder="污染程度">
            <el-option
            v-for="item in optonsArr"
            :key="item.id"
            :label="item.name"
              :value="item.name">
              </el-option>
          </el-select>
      </div>
      <div>
        <el-button type="primary" size="mini"  @click="fetchTableData">查 询</el-button>
        <el-button type="primary" size="mini"  @click="fetchTableData">重 置</el-button>
        <el-button type="primary" size="mini"  @click="fetchTableData">导出数据</el-button>
      </div>
    </div> -->
        <div
      v-if="renderScroller"
      v-show="showScroller"
      class="content"
    >
      <div class="wrapper">
        <RecycleScroller
          :key="pageModeFullPage"
          ref="scroller"
          class="scroller"
          :items="items"
          :item-size="50"
          :buffer="buffer"
          :page-mode="pageMode"
          key-field="id"
          size-field="height"
        >
               <template slot-scope="prop">
            <dl  class="table-body">
                            <dd>{{prop.index + 1}}</dd>
                            <dd>{{prop.item.name}}</dd>
                            <dd>{{prop.item.age}}</dd>
                            <dd>{{prop.item.company}}</dd>
                            <dd>{{prop.item.company}}</dd>
                            <dd>{{prop.item.company}}</dd>
                            <dd>{{prop.item.company}}</dd>
                          </dl>
            </template>
        </RecycleScroller>
      </div>
    </div>
    <!-- <div class="content-wrap">
      <RecycleScroller
        class="scroller"
        :items="items"
        :item-size="32"
      >
        <template slot="before">
                <dl class="table-head">
               <dt>序号</dt>
               <dt>区域</dt>
               <dt>项目名称</dt>
               <dt>pm10(μg/m3)</dt>
               <dt>PM2.5</dt>
               <dt>统计时间</dt>
               <dt>污染程度</dt>
             </dl>
        </template>

            <template slot-scope="prop">
            <dl  class="table-body">
                            <dd>{{prop.index + 1}}</dd>
                            <dd>{{prop.item.name}}</dd>
                            <dd>{{prop.item.age}}</dd>
                            <dd>{{prop.item.company}}</dd>
                            <dd>{{prop.item.company}}</dd>
                            <dd>{{prop.item.company}}</dd>
                            <dd>{{prop.item.company}}</dd>
                          </dl>
            </template>
      </RecycleScroller> -->
   <!-- <DynamicScroller
        class="scroller"
        :items="items"
        :emitUpdate="true"
        @update="updateEvent"
        :min-item-size="50">
            <template slot="before">
             <dl class="table-head">
               <dt>序号</dt>
               <dt>区域</dt>
               <dt>项目名称</dt>
               <dt>pm10(μg/m3)</dt>
               <dt>PM2.5</dt>
               <dt>统计时间</dt>
               <dt>污染程度</dt>
             </dl>
            </template>
               <template v-slot="{ item, index, active }">
                <DynamicScrollerItem
                  :item="items"
                  :active="active"
                  buffer="20"
                  :size-dependencies="[
                    item.name,
                  ]"
                  :data-index="index"
                >
              <dl  class="table-body">
                <dd>{{index + 1}}</dd>
                <dd>{{item.name}}</dd>
                <dd>{{item.age}}</dd>
                <dd>{{item.company}}</dd>
                <dd>{{item.company}}</dd>
                <dd>{{item.company}}</dd>
                <dd>{{item.company}}</dd>
              </dl>
                </DynamicScrollerItem>
              </template>
         </DynamicScroller> -->
    </div>
  </div>
</template>
<script>
import api from 'api';
import GetUrlParams from 'mixins/getUrlParams'
export default {
  data() {
    return {
      searchObj: {},
      treeData: [],
      count: 10000,
      renderScroller: true,
      showScroller: true,
      scopedSlots: false,
      buffer: 200,
      poolSize: 2000,
      enableLetters: true,
      pageMode: false,
      pageModeFullPage: true,
      items: [
        {
          'id': '601919b2d2e8a87934751e857',
          'age': 27,
          'name': 'Maldonado Puckett1',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a87934751e856',
          'age': 27,
          'name': 'Maldonado Puckett',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a87934751e855',
          'age': 27,
          'name': 'Maldonado 222',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a87934751e854',
          'age': 27,
          'name': 'Maldonado 33',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a87934751e853',
          'age': 27,
          'name': 'Maldonado 44',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a87934751e852',
          'age': 27,
          'name': 'Maldonado 55',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a87934751e0',
          'age': 27,
          'name': 'Maldonado Puckett1',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a87934751e81',
          'age': 27,
          'name': 'Maldonado Puckett',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a87934751e82',
          'age': 27,
          'name': 'Maldonado 222',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a87934751e3',
          'age': 27,
          'name': 'Maldonado 33',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a87934751e5',
          'age': 27,
          'name': 'Maldonado 44',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a87934751e7',
          'age': 27,
          'name': 'Maldonado 55',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a879347517',
          'age': 27,
          'name': 'Maldonado Puckett1',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a87934751e84',
          'age': 27,
          'name': 'Maldonado Puckett',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a87934751e85',
          'age': 27,
          'name': 'Maldonado 222',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a87934751e8584',
          'age': 27,
          'name': 'Maldonado 33',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a87934751e8539',
          'age': 27,
          'name': 'Maldonado 44',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a87934751e85200',
          'age': 27,
          'name': 'Maldonado 55',
          'company': 'LEXICONDO'
        }, {
          'id': '601919b2d2e8a87934751e8554',
          'age': 27,
          'name': 'Maldonado Puckett1',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a87934751e85654',
          'age': 27,
          'name': 'Maldonado Puckett',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a87934751e85578',
          'age': 27,
          'name': 'Maldonado 222',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a87934751e85469',
          'age': 27,
          'name': 'Maldonado 33',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a87934751e85355',
          'age': 27,
          'name': 'Maldonado 44',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a87934751e85266',
          'age': 27,
          'name': 'Maldonado 55',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a87934751e8577',
          'age': 27,
          'name': 'Maldonado Puckett1',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a87934751e85688',
          'age': 27,
          'name': 'Maldonado Puckett',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a87934751e85500',
          'age': 27,
          'name': 'Maldonado 222',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a87934751e8545',
          'age': 27,
          'name': 'Maldonado 33',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a87934751e8537',
          'age': 27,
          'name': 'Maldonado 44',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a87934751e8528',
          'age': 27,
          'name': 'Maldonado 55',
          'company': 'LEXICONDO'
        }, {
          'id': '601919b2d2e8a87934751e859',
          'age': 27,
          'name': 'Maldonado Puckett1',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a87934751e8560',
          'age': 27,
          'name': 'Maldonado Puckett',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a87934751e8551',
          'age': 27,
          'name': 'Maldonado 222',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a87934751e8542',
          'age': 27,
          'name': 'Maldonado 33',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a87934751e8533',
          'age': 27,
          'name': 'Maldonado 44',
          'company': 'LEXICONDO'
        },
        {
          'id': '601919b2d2e8a87934751e85028',
          'age': 27,
          'name': 'Maldonado 55',
          'company': 'LEXICONDO'
        }
      ],
      optionsArr: [{ label: '全部', value: '0' }, { label: '管理人员', value: '10' }, { label: '劳务人员', value: '20' }]
    }
  },
  mixins: [GetUrlParams],
  components: {

  },
  mounted() {
    this.getChildExcludePark()
    window.scroller = this.$refs.scroller
  },
  methods: {
    getChildExcludePark() {
      const type = this.type;
      const id = this.id;
      this.$get(api.getChildExcludePark(this.globalTenantId, this.type, this.id), {
        tenantId: this.globalTenantId,
        type,
        id
      }).then(res => {
        if(res.data) {
          const walk = (arr) => {
            arr.forEach(item => {
              if(item.childInfoVOList && !item.childInfoVOList.length) {
                delete item.childInfoVOList
              }else {
                walk(item.childInfoVOList)
              }
            })
          }
          walk([res.data])
          this.treeData = [res.data];
        }
      })
    },
    updateEvent(a, b, c) {
      console.log(a, b, c)
    }
  }
}
</script>

<style scoped lang="less">
.recycle-scroller-demo:not(.page-mode) {
  height: 100%;
}

.recycle-scroller-demo.page-mode:not(.full-page) {
  height: 100%;
}

.recycle-scroller-demo.page-mode {
  flex: auto 0 0;
}

.recycle-scroller-demo.page-mode .toolbar {
  border-bottom: solid 1px #e0edfa;
}

.content {
  height: 100%;
  flex: 100% 1 1;
  border: solid 1px #42b983;
  position: relative;
}

.recycle-scroller-demo.page-mode:not(.full-page) .content {
  overflow: auto;
}

.recycle-scroller-demo:not(.page-mode) .wrapper {
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.scroller {
  width: 100%;
  height: 100%;
}

.container{
  overflow: auto;
  height: 100%;
}
.content-wrap{
  overflow: auto;
  height: 100%;
}
/deep/ .vue-recycle-scroller__item-view{
  padding: 20px 0;
  border-bottom: 1px solid #3399FF;
  border-left: 1px solid #3399FF;
  border-right: 1px solid #3399FF;
}
.user {
  height: 32%;
  padding: 0 12px;
  display: flex;
  align-items: center;
}
.container{
  .table-head{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    dt{
      width: 15%;
    }
  }
  .table-body{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    dd{
      width: 15%;
    }
  }
  .header-search-wrap{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    .el-input{
      width: 200px;
    }
    /deep/ .el-input__inner{
      height: 40px;
      line-height: 40px;
      border: 1px solid rgba(16, 220, 250, 0.4);
      background-color: transparent;
      color: #fff;
    }
        /deep/ .el-input__inner{
          background-color: transparent;
          border: 1px solid rgba(16, 220, 250, 0.4);
          color: #fff;
        }
        /deep/	.el-input__inner:focus{
          opacity: 1;
        }
        .el-select{
            vertical-align: top;
          /deep/	.el-input{
            width: 160px;
            .el-input__inner{
              height: 36px;
              line-height: 36px;
              background-color: transparent;
              color: #fff;
              border: 1px solid rgba(16, 220, 250, 0.4);
            }
          }
        }
        .el-cascader{
          /deep/.el-input__inner{
            border: 1px solid rgba(16, 220, 250, 0.4);
            background-color: transparent;
            height: 36px;
          }
          /deep/.el-input__inner:hover{
            border: 1px solid rgba(16, 220, 250, 0.4);
            background-color: transparent;
          }
          /deep/.el-input__inner:focus{
            border: 1px solid rgba(16, 220, 250, 0.4);
            background-color: transparent;
          }
        }
        /deep/ .el-date-editor .el-range-input{
          color: #fff;
        }
        /deep/ .el-date-editor .el-range-separator{
          color: #fff;
        }
           .el-button--mini, .el-button--mini.is-round{
          padding: 11px 12px;
      }
      .el-button--primary{
          background: rgba(5, 35, 76, 0.2);
          border-radius: 4px;
          border: 1px solid  rgba(255, 255, 255, 0.4);
      }
      .el-button--primary:hover{
          color: #10DCFA;
          border: 1px solid  #10DCFA;
      }
      .el-button+.el-button{
          margin-left: 6px;
      }
  }
}
</style>
囿于江湖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-virtual-scroller：:high_voltage:大量数据快速滚动
02-08
虚拟虚拟卷轴 快速滚动任意数量的数据| |赞助商目录安装npm install --save vue-virtual-scroller :warning: 现在， vue-virtual-scroller使用在显示时自动刷新自身，以防止显示故障。 这意味着您需要包括vue-...
笔记: 移动端h5 vue3+vue-virtual-scroller加载不定高巨量数据,支持上拉加载,下拉刷新(配合vant PullRefresh)+ 分页加载以及避坑指南
u013505589的博客
04-20 4344
笔记: 移动端h5 vue3+vue-virtual-scroller加载不定高巨量数据,支持上拉加载,下拉刷新(配合vant PullRefresh)+ 分页加载以及避坑指南
vue里使用虚拟列表处理element-ui的el-select选择器组件数据量大时卡顿问题
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
09-20 5788
当我们使用el-select选择器下拉数据很大的时候，会出现页面卡顿，甚至卡死的情况，用户体验很不好。我目前采取的方案是使用虚拟列表的方式去处理这个问题。数据获取完毕： 点击输入框：我们可以看到 2 万条数据只展示了 30 条。 我们滚动找到 kaimo-666，选择它 我们再次点击输入框，我们以及定位到了 kaimo-666 这个位置 另外拓展了点击项目跟输入框数据改变的事件我基于 跟 实现了下拉虚拟列表，解决下拉选择框数据量大时卡顿问题。代码地址：https://github.com/kaimo31
vue3长列表优化，使用vue-virtual-scroller实现直播间弹幕列表虚拟滚动效果
最新发布
07-02 1821
但是需要注意：获取DynamicScroller这个组件的时候，要使用document.getElementById('liveMsg')这种形式，不能使用ref这种，因为ref获取到的并不是一个html元素，没有scrollTop方法，所以无法滚动到底部。这三个组件区别是滚动每一项高度是固定的还是动态的，Recycle就是固定的高度，Dynamic是动态的，动态的话，必须要包含DynamicScrollerItem。
[element-ui] el-select，虚拟滚动（vue-virtual-scroll-list）
qq_14993591的博客
07-18 2814
一、问题描述表单中某下拉框，由于数据过多，选择的时候会因为数据量过大导致页面卡顿，于是对于el-select进行二次封装，实现虚拟滚动。二、实现如下：看起来是加载了全部数据，实际上只加载了自己设定的10条（可修改）数据。
封装el-select，实现虚拟滚动,可单选、多选、搜索查询、创建条目
金乌的博客
05-18 7399
表单中某下拉框，由于数据过多，选择的时候会因为数据量过大导致页面卡顿，于是对于el-select进行二次封装，实现虚拟滚动。看起来是加载了全部数据，实际上只加载了自己设定的10条（可修改）数据。concatSymbol 拼接 label 和 value 的符号。isConcat 是否拼接 label 和 value。isRight 是否右边显示value（code）值。二、el-option-node.vue。三、utils index.js。Step2： 创建两个文件。一、Select.vue。
vue+element select组件结合vue-virtual-scroll-list插件解决数据量太大，导致渲染过慢
aiyang1214878408的博客
05-24 5173
因为项目中数据量有时候过于庞大，使用elementui的select组件时，会导致下拉框加载数据蛮并且卡顿甚至于卡死，为解决这个问题，发现vue-virtual-scroll-list这个插件，用来模拟虚拟滚动，从而解决问题。
Vue 展示巨量数据，vue-virtual-scroller 使用说明 vue3 vue2
热门推荐
学习笔记
07-31 3万+
Vue 展示巨量数据，vue-virtual-scroller 使用说明 vue3 vue2 一、遇到的问题 最近在做的一个小工具中需要解决一个展示巨量数据列表的问题，数据有 8万 多条。 刚开始我是直接让它渲染的，结果用了60秒之多，我以为是数据处理耗时多，经过排查，发现是 dom 渲染用时长，数据处理其实只用了不到 100ms，如下图： 二、解决方案 vue-virtual-scroller 所以目前主要需要解决的就是如何能流畅展示这么多数据的问题，搜了下，搜到 vue-virtual-scrolle
elp-cascader:基于'element-ui'和'vue-virtual-scroller'的Vue组件
05-28
elp-cascader Cascader based on 'element-ui' and 'vue-virtual-scroller'@vueblocks/elp-cascader基于element-ui和vue-virtual-scroller的级联选择器，用虚拟列表的方式逐级渲染列表。适用于数据量较大的场景。...
vue-virtual-collection:Vue组件，用于有效地呈现大型集合数据
05-26
虚拟虚拟收藏 Vue组件，用于有效地呈现...import VirtualCollection from 'vue-virtual-collection' Vue . use ( VirtualCollection ) 用它！ vue-virtual-collection提供了两种使用VirtualCollection 。 默认用法
vue-virtual-scroll-grid：Vue 3的可重用组件，以高效的方式将具有大量项目（例如1000多个项目）的列表呈现为网格
02-15
安装npm istall vue-virtual-scroll-grid枫树< template> <!-- length: The number of items in the list. --> <!-- pageSize: The number of items in a page from the item provider (e.g. a backend API...
vue-virtual-scroll:虚拟列表，可以实现无限加载
04-11
虚拟列表实现无限加载在进行前端业务开发时，很容易遇到需要加载巨大列表的场景，比如微博的信息流、微信的朋友圈和直播平台的聊天框，这些列表通常具有两个显着的特点不能分页只要用户愿意就可以无限的滚动下去在...
vue2虚拟滚动下拉选择器
獨孤殤的博客
09-19 866
解决 element-ui 中 el-select 组件在大数据量的情况下出现的性能问题(数据量太大，导致渲染过慢，或造成页面卡顿甚至于卡死) 。
import vue from vue_超顺畅 Vue 无限滚动列表组件Vue-VirtualScroller
weixin_39651325的博客
12-13 581
今天给大家推荐一个超高性能的Vue大数据滚动列表组件VueVirtualScroller。vue-virtual-scroller 基于 vue.js 构建的 无卡顿 超平滑 高性能 无限数据滚动列表组件。采用虚拟的滚动列表来优化性能。如果你的应用存在非常长或者无限滚动的列表，那么采用 窗口化 的技术来优化性能，只需要 渲染少部分区域 的内容，减少重新渲染组件和创建 dom 节点的时间。安装$ n...
el-select 性能优化
m0_59930878的博客
01-11 3073
el-select优化，为了解决大数据量的情况下出现的性能问题(数据量太大，导致渲染过慢，造成页面卡顿甚至于卡死)
vue-virtual-scroller用法，长列表优化
weixin_43239880的博客
10-14 2万+
vue-virtual-scroller的使用，长列表优化，虚拟列表，纵想丝滑 对于长列表来说，我们大部分的操作都是：1.懒加载，分页，2.Object.freeze冻结数组取消响应式，因为大多时候都是展示 3.高清图替换成缩略图，因为很多时候长列表的图尺寸都比较小，所以可以用小图来代替 以上能解决大部分的长列表问题，在可以分页的情况下 但是，还有两个问题没有解决，那就是：1.不能分页的时候怎么办 2.当用户向下滑动加载了很多很多的内容时，可能是1000个10000个的时候。这个时候浏览器就会变得卡顿，
element-ui-解决下拉框数据量过多问题（vue-virtual-scroll-list）
xiuxialala的博客
10-31 2464
【代码】element-ui-解决下拉框数据量过多问题（vue-virtual-scroll-list）
vue2实现虚拟滚动select下拉组件-上万条数据下拉支持过滤（样式仿el-select）
个人博客
07-17 1853
vue3中element-plus组件库有虚拟滚动select，然而维护的是vue2项目，遇到后端要返回9000条数据的情况，需要进行下拉选择并且可以过滤
Vue虚拟列表插件vue-virtual-scroller之中文文档
huangpb的博客
05-21 1万+
是一个高度可定制的虚拟滚动列表插件，它可以在大量数据下提供高性能的渲染和滚动。它可以处理各种类型的数据，例如列表、表格、瀑布流等，并且支持水平和垂直滚动，也支持动态列表项。vue-virtual-scroller的API和事件系统也非常丰富，可以让开发者轻松地自定义滚动逻辑和交互效果。
vue-virtual-scroller下拉加载
12-29
vue-virtual-scroller是一个用于Vue.js的虚拟滚动组件，它可以实现高性能的长列表渲染。下面是使用vue-virtual-scroller实现下拉加载的步骤： 1. 首先，安装vue-virtual-scroller依赖： ```shell npm install vue-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值