支持大数据渲染下拉列表组件开发 SuperSelect(基于antd Select)

最新推荐文章于 2024-06-11 16:12:12 发布
最新推荐文章于 2024-06-11 16:12:12 发布
阅读量2.3k 收藏 5
点赞数 2
文章标签： 大数据 javascript ViewUI
原文链接：https://juejin.im/post/5ce51afe5188252b79423bf5
版权

功能简介

antd 的 Select 组件不支持大数据量的下拉列表渲染，下拉列表数量太多会出现性能问题， SuperSelect 基于 antd 封装实现，替换原组件下拉列表，只渲染几十条列表数据，随下拉列表滚动动态刷新可视区列表状态，实现大数据量列表高性能渲染。

  • 特性

    1. 基于 antd Select 组件，不修改组件用法
    2. 替换 antd Select 组件的下拉列表部分实现动态渲染列表
    3. 初步测试 10w 条数据不卡顿

  • 实现方案

    1. 使用 antd Select dropdownRender 方法自定义原组件下拉列表部分
    2. 对自定义列表项绑定原 Select 组件的各项方法和回调函数支持
    3. 同步使用 antd 组件下拉列表样式

在线地址

使用

基本使用同 antd Select，只是使用 SuperSelect 代替 Select

import SuperSelect from 'components/SuperSelect';
import { Select } from 'antd';
const Option = Select.Option;

const Example = () => {
    const children = [];

    for (let i = 0; i < 100000; i++) {
        children.push(
            <Option value={i + ''} key={i}>
                {i}
            </Option>
        );
    }

    return (
        <SuperSelect
            showSearch
            // mode="multiple"
            // onChange={onChange}
            // onSearch={onSearch}
            // onSelect={onSelect}
        >
            {children}
        </SuperSelect>
    );
};
复制代码

问题

  • 多选模式选择后鼠标点击输入框中删除等图标时不能直接 hover 时获取焦点直接删除，需要点击两次
    Warning: the children of `Select` should be `Select.Option` 
or `Select.OptGroup`, instead of `li`
复制代码
  • 重写的下拉菜单没有 isSelectOption（rc-select 源码判断下拉列表元素）属性，控制台会有 warning 提示下拉列表元素不符合 Select 组件要求

大佬们有啥更好的做法或建议请多多指教

附上代码

import React, { PureComponent, Fragment } from 'react';
import { Select } from 'antd';

// 页面实际渲染的下拉菜单数量，实际为 2 * ITEM_ELEMENT_NUMBER
const ITEM_ELEMENT_NUMBER = 20;
// Select size 配置
const ITEM_HEIGHT_CFG = {
    small: 24,
    large: 40,
    default: 32,
};

class Wrap extends PureComponent {
    state = {
        list: this.props.list,
        allHeight: this.props.allHeight,
    };

    reactList = (list, allHeight) => this.setState({ list, allHeight });

    render() {
        const { list } = this.state;
        const { notFoundContent } = this.props;
        // 搜索下拉列表为空时显示 no data
        const noDataEle = (
            <li
                role="option"
                unselectable="on"
                className="ant-select-dropdown-menu-item ant-select-dropdown-menu-item-disabled"
                aria-disabled="true"
                aria-selected="false"
            >
                <div className="ant-empty ant-empty-normal ant-empty-small">
                    <div className="ant-empty-image">
                        <img
                            alt="No Data"
                            src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNDEiIHZpZXdCb3g9IjAgMCA2NCA0MSIgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxKSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxlbGxpcHNlIGZpbGw9IiNGNUY1RjUiIGN4PSIzMiIgY3k9IjMzIiByeD0iMzIiIHJ5PSI3Ii8+CiAgICA8ZyBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0iI0Q5RDlEOSI+CiAgICAgIDxwYXRoIGQ9Ik01NSAxMi43Nkw0NC44NTQgMS4yNThDNDQuMzY3LjQ3NCA0My42NTYgMCA0Mi45MDcgMEgyMS4wOTNjLS43NDkgMC0xLjQ2LjQ3NC0xLjk0NyAxLjI1N0w5IDEyLjc2MVYyMmg0NnYtOS4yNHoiLz4KICAgICAgPHBhdGggZD0iTTQxLjYxMyAxNS45MzFjMC0xLjYwNS45OTQtMi45MyAyLjIyNy0yLjkzMUg1NXYxOC4xMzdDNTUgMzMuMjYgNTMuNjggMzUgNTIuMDUgMzVoLTQwLjFDMTAuMzIgMzUgOSAzMy4yNTkgOSAzMS4xMzdWMTNoMTEuMTZjMS4yMzMgMCAyLjIyNyAxLjMyMyAyLjIyNyAyLjkyOHYuMDIyYzAgMS42MDUgMS4wMDUgMi45MDEgMi4yMzcgMi45MDFoMTQuNzUyYzEuMjMyIDAgMi4yMzctMS4zMDggMi4yMzctMi45MTN2LS4wMDd6IiBmaWxsPSIjRkFGQUZBIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K"
                        />
                    </div>
                    <p className="ant-empty-description">
                        {notFoundContent || '没有匹配到数据'}
                    </p>
                </div>
            </li>
        );
        return (
            <div style={{ overflow: 'hidden', height: this.state.allHeight }}>
                <ul
                    role="listbox"
                    className="ant-select-dropdown-menu  ant-select-dropdown-menu-root ant-select-dropdown-menu-vertical"
                    style={{
                        height: this.state.allHeight,
                        maxHeight: this.state.allHeight,
                        overflow: 'hidden',
                    }}
                    tabIndex="0"
                >
                    {list.length > 0 ? list : noDataEle}
                </ul>
            </div>
        );
    }
}

export default class SuperSelect extends PureComponent {
    constructor(props) {
        super(props);

        const { mode, defaultValue, value } = props;
        this.isMultiple = ['tags', 'multiple'].includes(mode);

        // 设置默认 value
        let defaultV = this.isMultiple ? [] : '';
        defaultV = value || defaultValue || defaultV;

        this.state = {
            children: props.children || [],
            filterChildren: null,
            value: defaultV,
        };
        // 下拉菜单项行高
        this.ITEM_HEIGHT = ITEM_HEIGHT_CFG[props.size || 'default'];
        // 可视区 dom 高度
        this.visibleDomHeight = this.ITEM_HEIGHT * ITEM_ELEMENT_NUMBER;
        // 滚动时重新渲染的 scrollTop 判断值，大于 reactDelta 则刷新下拉列表
        this.reactDelta = (this.visibleDomHeight * 2) / 3;
        // 是否拖动滚动条快速滚动状态
        this.isStopReact = false;
        // 上一次滚动的 scrollTop 值
        this.prevScrollTop = 0;

        this.scrollTop = 0;
    }

    componentDidUpdate(prevProps, prevStates) {
        if (prevProps.children !== this.props.children) {
            const { mode, defaultValue, value } = this.props;
            this.isMultiple = ['tags', 'multiple'].includes(mode);

            // 更新时设置默认 value
            let defaultV = this.isMultiple ? [] : '';
            defaultV = value || defaultValue || defaultV;

            this.setState({
                children: this.props.children || [],
                filterChildren: null,
                value: defaultV,
            });
        }
    }

    getItemStyle = i => ({
        position: 'absolute',
        top: this.ITEM_HEIGHT * i,
        width: '100%',
        height: this.ITEM_HEIGHT,
    });

    addEvent = () => {
        this.scrollEle = document.querySelector('.my-select');
        // 下拉菜单未展开时元素不存在
        if (!this.scrollEle) return;
        this.scrollEle.addEventListener('scroll', this.onScroll, false);
    };

    onScroll = () => this.throttleByHeight(this.onScrollReal);

    onScrollReal = () => {
        this.allList = this.getUseChildrenList();
        this.showList = this.getVisibleOptions();

        this.prevScrollTop = this.scrollTop;
        // 重新渲染列表组件 Wrap
        let allHeight = this.allList.length * this.ITEM_HEIGHT || 100;
        this.wrap.reactList(this.showList, allHeight);
    };

    throttleByHeight = () => {
        this.scrollTop = this.scrollEle.scrollTop;
        // 滚动的高度
        let delta = this.prevScrollTop - this.scrollTop;
        delta = delta < 0 ? 0 - delta : delta;

        // TODO: 边界条件优化， 滚动约 2/3 可视区 dom 高度时刷新 dom
        delta > this.reactDelta && this.onScrollReal();
    };

    // 列表可展示所有 children
    getUseChildrenList = () => this.state.filterChildren || this.state.children;

    getStartAndEndIndex = () => {
        // 滚动后显示在列表可视区中的第一个 item 的 index
        const showIndex = Number(
            (this.scrollTop / this.ITEM_HEIGHT).toFixed(0)
        );

        const startIndex =
            showIndex - ITEM_ELEMENT_NUMBER < 0
                ? 0
                : showIndex - ITEM_ELEMENT_NUMBER / 2;
        const endIndex = showIndex + ITEM_ELEMENT_NUMBER;
        return { startIndex, endIndex };
    };

    getVisibleList = () => {
        // 搜索时使用过滤后的列表
        const { startIndex, endIndex } = this.getStartAndEndIndex();
        // 渲染的 list
        return this.allList.slice(startIndex, endIndex);
    };

    getVisibleOptions = () => {
        const visibleList = this.getVisibleList();
        const { startIndex } = this.getStartAndEndIndex();

        // 显示中的列表元素添加相对定位样式
        return visibleList.map((item, i) => {
            let props = { ...item.props };
            const text = props.children;

            const realIndex = startIndex + Number(i);
            const key = props.key || realIndex;

            const { value } = this.state;
            const valiValue = text || props.value;

            const isSelected =
                value && value.includes
                    ? value.includes(valiValue)
                    : value == valiValue;

            const classes = `ant-select-dropdown-menu-item ${
                isSelected ? 'ant-select-dropdown-menu-item-selected' : ''
            }`;
            // antd 原素，下拉列表项右侧 √ icon
            const selectIcon = (
                <i
                    aria-label="icon: check"
                    className="anticon anticon-check ant-select-selected-icon"
                >
                    <svg
                        viewBox="64 64 896 896"
                        className=""
                        data-icon="check"
                        width="1em"
                        height="1em"
                        fill="currentColor"
                        aria-hidden="true"
                        focusable="false"
                    >
                        <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" />
                    </svg>
                </i>
            );

            props._childrentext = text;
            return (
                <li
                    className={classes}
                    key={key}
                    onMouseDown={() => this.onClick(props, item)}
                    {...props}
                    style={this.getItemStyle(realIndex)}
                >
                    {text}
                    {/* 多选项选中状态 √ 图标 */}
                    {this.isMultiple ? selectIcon : null}
                </li>
            );
        });
    };

    render() {
        let {
            children,
            dropdownStyle,
            optionLabelProp,
            notFoundContent,
            ...props
        } = this.props;

        this.allList = this.getUseChildrenList();
        this.showList = this.getVisibleOptions();

        let allHeight = this.allList.length * this.ITEM_HEIGHT || 100;

        dropdownStyle = {
            maxHeight: '250px',
            ...dropdownStyle,
            overflow: 'auto',
            position: 'relative',
        };

        const { value } = this.state;
        // 判断处于 antd Form 中时不自动设置 value
        let _props = { ...props };
        // 先删除 value，再手动赋值，防止空 value 影响 placeholder
        delete _props.value;
        if (!this.props['data-__field'] && value && value.length > 0) {
            _props.value = value;
        }

        // 设置显示在输入框的文本，替换 children 为自定义 childrentext,默认 children 会包含 √ icon
        optionLabelProp = optionLabelProp ? optionLabelProp : '_childrentext';
        optionLabelProp =
            optionLabelProp === 'children' ? '_childrentext' : optionLabelProp;

        return (
            <Select
                {..._props}
                onSearch={this.onSearch}
                onChange={this.onChange}
                onSelect={this.onSelect}
                dropdownClassName="my-select"
                optionLabelProp={optionLabelProp}
                dropdownStyle={dropdownStyle}
                onDropdownVisibleChange={this.setSuperDrowDownMenu}
                ref={ele => (this.select = ele)}
                dropdownRender={menu => (
                    <Fragment>
                        <Wrap
                            ref={ele => (this.wrap = ele)}
                            allHeight={allHeight}
                            list={this.showList}
                            notFoundContent={notFoundContent}
                        />
                    </Fragment>
                )}
            >
                {this.showList}
            </Select>
        );
    }

    // 须使用 setTimeout 确保在 dom 加载完成之后添加事件
    setSuperDrowDownMenu = () => {
        this.allList = this.getUseChildrenList();
        this.allList = this.getUseChildrenList();

        if (!this.eventTimer) {
            this.eventTimer = setTimeout(() => this.addEvent(), 0);
        } else {
            let allHeight = this.allList.length * this.ITEM_HEIGHT || 100;
            // 下拉列表单独重新渲染
            this.wrap && this.wrap.reactList(this.showList, allHeight);
        }
    };

    /**
     * 替换了 antd Select 的下拉列表，手动实现下拉列表项的点击事件，
     * 绑定原组件的各项事件回调
     * itemProps: li react 元素的 props
     * item: li 元素
     */
    onClick = (itemProps, item) => {
        let { value } = itemProps;
        const { onDeselect } = this.props;

        let newValue = this.state.value || [];
        let option = item;

        // 多选
        if (this.isMultiple) {
            newValue = [...newValue];
            // 点击选中项取消选中操作
            if (newValue.includes(value)) {
                newValue = newValue.filter(i => i !== value);
                onDeselect && onDeselect(value, item);
            } else {
                newValue.push(value);
            }
            // 获取原 onChange 函数第二个参数 options，react 元素数组
            option = this.state.children.filter(i =>
                newValue.includes(i.props.value)
            );
        } else {
            newValue = value;
        }

        // 多选模式点击选择后下拉框持续显示
        this.isMultiple && this.focusSelect();

        this.onChange(newValue, option);
        this.onSelect(newValue, option);
    };

    // 非 antd select 定义元素点击后会失去焦点，手动再次获取焦点防止多选时自动关闭
    focusSelect = () => setTimeout(() => this.select.focus(), 0);

    // 绑定 onSelect 事件
    onSelect = (v, opt) => {
        const { onSelect } = this.props;
        onSelect && onSelect(v, opt);
    };

    onChange = (value, opt) => {
        // 删除选中项时保持展开下拉列表状态
        if (Array.isArray(value) && value.length < this.state.value.length) {
            this.focusSelect();
        }

        const { showSearch, onChange, autoClearSearchValue } = this.props;
        if (showSearch || this.isMultiple) {
            // 搜索模式下选择后是否需要重置搜索状态
            if (autoClearSearchValue !== false) {
                this.setState({ filterChildren: null }, () => {
                    // 搜索成功后重新设置列表的总高度
                    this.setSuperDrowDownMenu();
                });
            }
        }

        this.setState({ value });
        onChange && onChange(value, opt);
    };

    onSearch = v => {
        let { showSearch, onSearch, filterOption, children } = this.props;

        if (showSearch && filterOption !== false) {
            // 须根据 filterOption（如有该自定义函数）手动 filter 搜索匹配的列表
            let filterChildren = null;
            if (typeof filterOption === 'function') {
                filterChildren = children.filter(item => filterOption(v, item));
            } else if (filterOption === undefined) {
                filterChildren = children.filter(item =>
                    this.filterOption(v, item)
                );
            }

            // 设置下拉列表显示数据
            this.setState(
                { filterChildren: v === '' ? null : filterChildren },
                () => {
                    // 搜索成功后需要重新设置列表的总高度
                    this.setSuperDrowDownMenu();
                }
            );
        }
        onSearch && onSearch(v);
    };

    filterOption = (v, option) => {
        // 自定义过滤对应的 option 属性配置
        const filterProps = this.props.optionFilterProp || 'value';
        return `${option.props[filterProps]}`.indexOf(v) >= 0;
    };

    componentWillUnmount() {
        this.removeEvent();
    }
    removeEvent = () => {
        if (!this.scrollEle) return;
        this.scrollEle.removeEventListener('scroll', this.onScroll, false);
    };
}

复制代码
weixin_33860528
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
super select
09-30
模拟select控件,可以输入,下拉别表自动模糊匹配,高亮显示匹配内容.IE6和谷歌浏览器测试通过.
ListView实现下拉动态渲染数据
06-18 117
欢迎讨论欢迎一起学习：微信jkxx123321 这是一篇关于LIstView实现动态数据渲染的文章！[RN] 首先我们讲讲数据是如何来规划的 一般情况下我们有两种规划方案前提比如我们数据是100条+ 第一：一次性把100条数据fetch过来 然后由前端JS代码来做分页处理（如每次渲染10条） 第二：在server端做处理通过?page=n的方式 每次需要第几页数据...
Vue项目实践：使用滚动下拉分页优化大数据展示页面【通过防抖加标志位进行方案优化】
最新发布
qq_42696432的博客
06-11 1154
统的分页机制通过点击页码来加载更多内容，虽然直观，但在处理大量数据时可能会导致用户体验不佳。相比之下，滚动下拉分页能够在用户滚动到页面底部时自动加载更多内容，既节省了用户操作，也使得数据的展示更加流畅自然。
大数据量分页下拉菜单设计
ll3231的专栏
10-25 304
下拉菜单的数据是1、2、3...100、200、300..1000、2000 public String setPageNav(int absolutePage,int pageSize)     {         String strTemp1 = "";         String strTemp2 = "";         String strBlock1 =...
发现了一个新的组件SuperBoxSelect
honlin的专栏
07-18 1193
 最近，Ext的社区发布了一个新的组件：SuperBoxSelect，有两个版本：适合Ext2.2.1的和适合Ext3.0.0的。
antd——封装select下拉框组件——解决数据量巨大时下拉框渲染缓慢的问题——基础积累
yehaocheng520的博客
05-09 4896
antd——封装select下拉框组件——解决数据量巨大时下拉框渲染缓慢的问题
antd-virtual-select:长列表优化antd select组件
05-12
开始 npm i antd-virtual-select ...antd 4.0 Select 组件已支持虚拟列表（ie11+），此组件基于 antd 3.x，可用于 ie9 浏览器 使用 基本使用同 antd Select，只是使用 SuperSelect 代替 Select impo
深入理解Antd-Select组件的用法
10-15
在Ant Design（Antd）框架中，Select组件是一个常用的下拉选择控件，它提供了丰富的功能和多种类型的实现，能够满足各种复杂的UI交互需求。本文将深入探讨Antd-Select组件的不同类型及其潜在的优化策略。 一、Antd-...
antd的select下拉框因为数据量太大造成卡顿的解决方式
01-22
相信用过antd的同学基本都用过select下拉框了，这个组件数据量少的时候很好用，但是当数据量大的时候，比如大几百条上千条甚至是几千条的时候就感觉一点都不好用了，卡的我怀疑人生，一点用户体验都没有了。...
在antd Form表单中select设置初始值操作
01-18
我就废话不多说了，大家还是直接看代码吧~ <Form.Item label=作用对象> {getFieldDecorator('targetId', { initial...Select placeholder=请选择作用对象> {targetList.map(entity => <Option key={enti
解决Antd 里面的select 选择框联动触发的问题
01-22
有两个 select框，且这俩select框是关联的，触发select1，select2里面才会有值。 但是现在的问题是这样的： 触发select1，触发select2，再触发select1，此时select2里面的值变成了上次一选中的value 值，而不会被...
vue+element select组件结合vue-virtual-scroll-list插件解决数据量太大，导致渲染过慢
aiyang1214878408的博客
05-24 5076
因为项目中数据量有时候过于庞大，使用elementui的select组件时，会导致下拉框加载数据蛮并且卡顿甚至于卡死，为解决这个问题，发现vue-virtual-scroll-list这个插件，用来模拟虚拟滚动，从而解决问题。
iview select组件在大数据情况下虚拟加载处理方式
码上飞翔
11-29 553
最后就是返现问题，由于动态渲染不会把所有的option都渲染出来，导致不能返现，调试了下发现多选的时候，select组件是在values里面plus值，所以在数据返回后，循环以前选中的，然后查找，最后给values赋值，这是多选的方式，单选应该也是大同小异，如果不行，去调试一下看单选是怎么赋值的。select 组件在几千上万条数据的时候特别卡，调试发现option组件渲染太多，导致整个页面都卡，通过调研发现可以通过虚拟加载的方式动态渲染option，亲测上万数据一点都不卡，废话不说，上代码。
Antd组件中选择框数据量太大处理
qq_51249969的博客
05-09 591
【代码】Antd组件中选择框数据量太大处理。
Antd如何用Menu组件渲染二级或三级目录
热门推荐
吴小迪的博客
05-11 4万+
今天给大家带来React项目结合Antd的时候如何渲染二级菜单 就算你用其他的UI框架也是换汤不换药。 1.首先配置Antd,关于配置Antd请前往React配置Antd处观看。 2.然后在routes文件定义你的sidebar数据 其中有一个isSiderbar标记，这个就是我们待会用来判断是否是sidebar的类型。 3.接下来我们写二级菜单的数据 其中有isresourceManagem...
react-antd级联选择框（后台数据渲染）
WebView
05-28 2767
1、默认效果 2、这里我们需要实现的是二级级联选择。 官方实例给的数组结构是这样的 所以我们也要将后台返回的数据构造成这样既可。 const classGradesData = []; singleClassList && singleClassList.forEach(item => { const children = []; //这里是生成children的数据结构 item.classList.fo
jquery 超级select插件 v3.2.0.0版本 支持汉字、头写拼音、英文快速定位查询的超级select插件。可方向键、tab 键快速选择。 支持 ie6.0、7.0、8.0、firefo...
weixin_30478923的博客
06-22 110
jquery 超级select插件 v3.2.0.0版本 支持汉字、头写拼音、英文快速定位查询的超级select插件。可方向键、tab 键快速选择。 支持 ie6.0、7.0、8.0、firefox all 版本。 传统select 所有学校 a english book 浏阳市浏阳河小学 浏阳市人民路小学 浏...
使用Geolocation校正GDAL不支持的数据
GDAL专栏
03-28 3030
对于低分数据来说，常用的校正方式就是给定数据的经纬度查找表来进行校正。在GDAL中，这种校正方式叫Geolocation array。常用的数据有国外的MODIS数据，国内的如风云系列（FY）和海洋系列卫星（HY）都是使用这种方式来进行处理。 GDAL库读取MODIS数据（HDF格式）的时候，会自动读取里面的经纬度查找表，并构造一个叫做GeoLocation的元数据段。如下所示： 只要有这个
vue+ElementUI el-select实现下拉选择表格组件（2023-09-04 TSelectTable组件实现虚拟滚动，解决不分页数据量大渲染DOM过多而卡顿问题）
wocwin的博客
06-16 8942
TSelectTable组件实现虚拟滚动，解决不分页数据量大渲染DOM过多而卡顿问题TSelectTable组件新增搜索过滤功能、新增翻页选中功能；TSelectTable组件新增单选/多选默认值回显；TSelectTable组件新增单选---新增上、下、回车键盘事件；2023-06-28 TSelectTable组件新增查询条件组件；2023-08-21 解决TSelectTable组件表单编辑回显设置defaultSelectVal 无效
antd select 点击下拉再调用下拉列表接口用哪个select的API
05-27
可以使用 `... {/* 将请求到的 options 数据渲染到下拉列表中 */} {this.state.options.map((option) => ( <Select.Option key={option.value}>{option.label}</Select.Option> ))} </Select> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值