layui页面的自动上下滚动

最新推荐文章于 2024-06-20 12:45:15 发布
最新推荐文章于 2024-06-20 12:45:15 发布
阅读量3.5k 收藏 4
点赞数
分类专栏： layui 前端 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39162838/article/details/117380022
版权

核心代码

            /* 滚动条自动上下滚动 */
            scrollBar();
            function scrollBar() {
                var height = $('.layui-table-body').height();
                var number = 0;
                var length = 0;
                var time = setInterval(function () {
                    number += 1;
                    // 当滚动完后，从新开始
                    if (number == 2) {
                        clearInterval(time);
                        $('.layui-table-body').scrollTop('0');
                    } else {
                        // 设置这个高度滚动几次
                        length += height / 2;
                        $('.layui-table-body').scrollTop(length);  //只有此处有区别
                    }
                }, 3000);   // 设置时间，3秒滚动一次
            };

            setInterval(function () {
                table.reload('contentTable',{
                    method:'get'
                    ,page: {
                        curr: 1//重新从第 1 页开始
                    }
                });
                scrollBar();
            }, 6000);    //全部滚动一次需要6秒

整体页面代码

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/5/14 0014
  Time: 13:23
  批量拆箱看板
--%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<head>
    <meta charset="utf-8">
    <title>倒箱品管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <jsp:include page="${pageContext.request.contextPath }/resource_path.jsp" flush="true"/>
    <script type="text/css">
        .layui-tab-item {
            display: none;
            height: 1000px;
        }
    </script>
    <%
        //页面每隔30秒自动刷新一遍
        response.setHeader("refresh","10");
    %>
</head>
<body>
    <div class="x-body fDiv">
        <table id="tableList" lay-filter="tableList"></table>
    </div>

    <div id="tableListDetailDiv" class="fDiv" hidden="hidden">
        <table id="tableListDetail" lay-filter="tableListDetail"></table>
    </div>

    <script type="text/javascript">
        layui.use(['table','layer','upload','form'], function(){
            var table = layui.table;
            var $ = layui.jquery, active = {
                reload:function () {
                    table.reload('contentTable',{
                        method:'get'
                        ,page: {
                            curr: 1//重新从第 1 页开始
                        }
                    });
                }
            };

            $('.layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            /* 这是行点击变色的函数，放到复选框点击事件上方，就是因为，单击用这个，如果是勾选复选框，就把这个事件覆盖了。 显示复选框的样式 */
            /* 关键点，在页面头部加class样式(.layui-table-view .layui-table-body)，在table外加div层，id为fDiv */
            $(document).on('click', '.fDiv .layui-table-view .layui-table-body tr', function (event) {
                var trElem = $(this);
                var tableView = trElem.closest('.layui-table-view');
                tableView.find('.layui-table-body tr.table_tr_click').removeClass('table_tr_click');
                tableView.find('.layui-table-body tr[data-index="' + trElem.data('index') + '"]').addClass('table_tr_click');
            });

            /* 疑问：想在最后加一列备注，合并4行，但是失败，样式会乱，如果加在供应商名称后，就没问题*/
            table.render({
                elem: '#tableList'
                ,url:'${pageContext.request.contextPath }/kanban/piLiangChaiXiangKanBan.do'
                ,id :'contentTable'
                ,totalRow: true //开启合计行
                ,page : false
                ,height : 800
                ,cols: [
                    [
                        {title:'序号',width: 50,type:'numbers', align:'center', rowspan: 4}
                        ,{field: 'customer_name', title:'供应商名称', width:'150', align:'center', rowspan: 4, totalRowText: '合计：'}
                        ,{title:'倒箱品库存现况', align:'center', colspan: 14}
                        ,{title:'倒箱品作业现况', align:'center', colspan: 6}

                    ],
                    [
                        {title:'库存', align:'center', rowspan: 2, colspan: 2}
                        ,{title:'日发货计划', align:'center', colspan: 8}
                        ,{title:'下趟数', align:'center', colspan: 4}
                        ,{title:'今日计划', align:'center', rowspan: 2, colspan: 2}
                        ,{title:'完成数', align:'center', rowspan: 2, colspan: 2}
                        ,{title:'未完成', align:'center', rowspan: 2, colspan: 2}
                    ],
                    [
                        {title:'计划总数', align:'center', colspan: 2}
                        ,{title:'已发货', align:'center', colspan: 2}
                        ,{title:'未发货', align:'center', colspan: 2}
                        ,{title:'差额', align:'center', colspan: 2}
                        ,{title:'计划总数', align:'center', colspan: 2}
                        ,{title:'差额', align:'center', colspan: 2}
                    ],
                    [
                        {field: 'wuLiaoKuCun',title: '物料',align:'center', width:'80', totalRow: true}
                        ,{field: 'rongQiKuCun',title: '容器',align:'center', width:'60', totalRow: true}
                        ,{field: 'wuLiaoJiHuaFaHuo',title: '物料',align:'center', width:'80', totalRow: true}
                        ,{field: 'rongQiJiHuaFaHuo',title: '容器',align:'center', width:'60', totalRow: true}
                        ,{field: 'wuLiaoYiFa',title: '物料',align:'center', width:'80', totalRow: true}
                        ,{field: 'rongQiYiFa',title: '容器',align:'center', width:'60', totalRow: true}
                        ,{field: 'wuLiaoWeiFa',title: '物料',align:'center', width:'80', totalRow: true}
                        ,{field: 'rongQiWeiFa',title: '容器',align:'center', width:'60', totalRow: true}
                        ,{field: 'wuLiaoJiHuaCha',title: '物料',align:'center', width:'80',style:'color: #FF0000;', totalRow: true}
                        ,{field: 'rongQiJiHuaCha',title: '容器',align:'center', width:'60',style:'color: #FF0000;', totalRow: true}
                        ,{field: 'wuLiaoXiaGeJiHua',title: '物料',align:'center', width:'80', totalRow: true}
                        ,{field: 'rongQiXiaGeJiHua',title: '容器',align:'center', width:'60', totalRow: true}
                        ,{field: 'wuLiaoXiaGeJiHuaCha',title: '物料',align:'center', width:'80', totalRow: true}
                        ,{field: 'rongQiXiaGeJiHuaCha',title: '容器',align:'center', width:'60', totalRow: true}
                        ,{field: 'wuLiaoChaiJiHua',title: '物料',align:'center', width:'80', totalRow: true}
                        ,{field: 'rongQiChaiJiHua',title: '容器',align:'center', width:'60', totalRow: true}
                        ,{field: 'wuLiaoChaiYiZuo',title: '物料',align:'center', width:'80', totalRow: true}
                        ,{field: 'rongQiChaiYiZuo',title: '容器',align:'center', width:'60', totalRow: true}
                        ,{field: 'wuLiaoChaiWeiZuo',title: '物料',align:'center', width:'80',style:'color: #FF0000;', totalRow: true}
                        ,{field: 'rongQiChaiWeiZuo',title: '容器',align:'center', width:'60',style:'color: #FF0000;', totalRow: true}
                    ]
                ]
                ,done : function(res, curr, count){
                    $('th').css({
                        'background-color': '#009688', 'color': '#fff','font-weight':'bold'
                    });
                    var divArr = $(".layui-table-total div.layui-table-cell");
                    $.each(divArr,function (index,item) {
                        var _div = $(item);
                        var content = _div.html();
                        content = content.replace(".00","");
                        _div.html(content);
                    });
                    var that = this.elem.next();
                    res.data.forEach(function (item, index) {
                        // 所需的条件
                        if(item.wuLiaoJiHuaCha > 0){
                            // 添加颜色--#1E9FFF ；'threeMonth'根据需要填充背景色的field进行更改
                            that.find(".layui-table-box tbody tr[data-index='" + index + "'] td[data-field='wuLiaoJiHuaCha']").css("background-color", "#FFFF66");
                        }
                        if(item.rongQiJiHuaCha > 0){
                            // 添加颜色--#1E9FFF ；'threeMonth'根据需要填充背景色的field进行更改
                            that.find(".layui-table-box tbody tr[data-index='" + index + "'] td[data-field='rongQiJiHuaCha']").css("background-color", "#FFFF66");
                        }
                        if(item.wuLiaoChaiWeiZuo > 0){
                            // 添加颜色--#1E9FFF ；'threeMonth'根据需要填充背景色的field进行更改
                            that.find(".layui-table-box tbody tr[data-index='" + index + "'] td[data-field='wuLiaoChaiWeiZuo']").css("background-color", "#FFFF66");
                        }
                        if(item.rongQiChaiWeiZuo > 0){
                            // 添加颜色--#1E9FFF ；'threeMonth'根据需要填充背景色的field进行更改
                            that.find(".layui-table-box tbody tr[data-index='" + index + "'] td[data-field='rongQiChaiWeiZuo']").css("background-color", "#FFFF66");
                        }
                    });
                }
            });

            //行点击事件，显示明细表
            table.on('row(tableList)', function(obj){
                var customerId = obj.data.customerId;
                var customerName = obj.data.customer_name;
                console.log("canshu="+customerId);
                layer.open({
                    type: 1 					//Page层类型
                    ,area: ['1700px', '700px'] 	//宽  高
                    ,title: customerName
                    ,shade: 0.6 				//遮罩透明度
                    ,maxmin: true 				//允许全屏最小化
                    ,anim: 1 					//0-6的动画形式，-1不开启
                    ,content: $('#tableListDetailDiv')
                    ,end: function () {
                        var formDiv = document.getElementById('tableListDetailDiv');
                        formDiv.style.display = '';
                    }
                    ,success:function(layero, index){
                        table.render({
                            elem: '#tableListDetail'
                            ,url:'${pageContext.request.contextPath }/kanban/piLiangChaiXiangKanBanOnMateriel.do'
                            ,where: {"customerId":customerId}
                            ,id :'contentTableDetail'
                            ,totalRow: true //开启合计行
                            ,page : false
                            ,height : 600
                            ,cols: [
                                [
                                    {title:'序号',width: 50,type:'numbers', align:'center', rowspan: 4}
                                    ,{field: 'materiel_name', title:'物料名称', width:'150', align:'center', rowspan: 4, totalRowText: '合计：'}
                                    ,{field: 'materiel_num', title:'零件号', width:'150', align:'center', rowspan: 4}
                                    ,{title:'倒箱品库存现况', align:'center', colspan: 14}
                                    ,{title:'倒箱品作业现况', align:'center', colspan: 6}

                                ],
                                [
                                    {title:'库存', align:'center', rowspan: 2, colspan: 2}
                                    ,{title:'日发货计划', align:'center', colspan: 8}
                                    ,{title:'下趟数', align:'center', colspan: 4}
                                    ,{title:'今日计划', align:'center', rowspan: 2, colspan: 2}
                                    ,{title:'完成数', align:'center', rowspan: 2, colspan: 2}
                                    ,{title:'未完成', align:'center', rowspan: 2, colspan: 2}
                                ],
                                [
                                    {title:'计划总数', align:'center', colspan: 2}
                                    ,{title:'已发货', align:'center', colspan: 2}
                                    ,{title:'未发货', align:'center', colspan: 2}
                                    ,{title:'差额', align:'center', colspan: 2}
                                    ,{title:'计划总数', align:'center', colspan: 2}
                                    ,{title:'差额', align:'center', colspan: 2}
                                ],
                                [
                                    {field: 'wuLiaoKuCun',title: '物料',align:'center', width:'70', totalRow: true}
                                    ,{field: 'rongQiKuCun',title: '容器',align:'center', width:'60', totalRow: true}
                                    ,{field: 'wuLiaoJiHuaFaHuo',title: '物料',align:'center', width:'70', totalRow: true}
                                    ,{field: 'rongQiJiHuaFaHuo',title: '容器',align:'center', width:'60', totalRow: true}
                                    ,{field: 'wuLiaoYiFa',title: '物料',align:'center', width:'70', totalRow: true}
                                    ,{field: 'rongQiYiFa',title: '容器',align:'center', width:'60', totalRow: true}
                                    ,{field: 'wuLiaoWeiFa',title: '物料',align:'center', width:'70', totalRow: true}
                                    ,{field: 'rongQiWeiFa',title: '容器',align:'center', width:'60', totalRow: true}
                                    ,{field: 'wuLiaoJiHuaCha',title: '物料',align:'center', width:'70',style:'color: #FF0000;', totalRow: true}
                                    ,{field: 'rongQiJiHuaCha',title: '容器',align:'center', width:'60',style:'color: #FF0000;', totalRow: true}
                                    ,{field: 'wuLiaoXiaGeJiHua',title: '物料',align:'center', width:'70', totalRow: true}
                                    ,{field: 'rongQiXiaGeJiHua',title: '容器',align:'center', width:'60', totalRow: true}
                                    ,{field: 'wuLiaoXiaGeJiHuaCha',title: '物料',align:'center', width:'70', totalRow: true}
                                    ,{field: 'rongQiXiaGeJiHuaCha',title: '容器',align:'center', width:'60', totalRow: true}
                                    ,{field: 'wuLiaoChaiJiHua',title: '物料',align:'center', width:'70', totalRow: true}
                                    ,{field: 'rongQiChaiJiHua',title: '容器',align:'center', width:'60', totalRow: true}
                                    ,{field: 'wuLiaoChaiYiZuo',title: '物料',align:'center', width:'70', totalRow: true}
                                    ,{field: 'rongQiChaiYiZuo',title: '容器',align:'center', width:'60', totalRow: true}
                                    ,{field: 'wuLiaoChaiWeiZuo',title: '物料',align:'center', width:'70',style:'color: #FF0000;', totalRow: true}
                                    ,{field: 'rongQiChaiWeiZuo',title: '容器',align:'center', width:'60',style:'color: #FF0000;', totalRow: true}
                                ]
                            ]
                            ,done : function(res, curr, count){
                                $('th').css({
                                    'background-color': '#009688', 'color': '#fff','font-weight':'bold'
                                });
                                var divArr = $(".layui-table-total div.layui-table-cell");
                                $.each(divArr,function (index,item) {
                                    var _div = $(item);
                                    var content = _div.html();
                                    content = content.replace(".00","");
                                    _div.html(content);
                                });
                                var that = this.elem.next();
                                res.data.forEach(function (item, index) {
                                    // 所需的条件
                                    if(item.wuLiaoJiHuaCha > 0){
                                        // 添加颜色--#1E9FFF ；'threeMonth'根据需要填充背景色的field进行更改
                                        that.find(".layui-table-box tbody tr[data-index='" + index + "'] td[data-field='wuLiaoJiHuaCha']").css("background-color", "#FFFF66");
                                    }
                                    if(item.rongQiJiHuaCha > 0){
                                        // 添加颜色--#1E9FFF ；'threeMonth'根据需要填充背景色的field进行更改
                                        that.find(".layui-table-box tbody tr[data-index='" + index + "'] td[data-field='rongQiJiHuaCha']").css("background-color", "#FFFF66");
                                    }
                                    if(item.wuLiaoChaiWeiZuo > 0){
                                        // 添加颜色--#1E9FFF ；'threeMonth'根据需要填充背景色的field进行更改
                                        that.find(".layui-table-box tbody tr[data-index='" + index + "'] td[data-field='wuLiaoChaiWeiZuo']").css("background-color", "#FFFF66");
                                    }
                                    if(item.rongQiChaiWeiZuo > 0){
                                        // 添加颜色--#1E9FFF ；'threeMonth'根据需要填充背景色的field进行更改
                                        that.find(".layui-table-box tbody tr[data-index='" + index + "'] td[data-field='rongQiChaiWeiZuo']").css("background-color", "#FFFF66");
                                    }
                                });
                            }
                        });
                    }
                })
            });

            /* 滚动条自动上下滚动 */
            scrollBar();
            function scrollBar() {
                var height = $('.layui-table-body').height();
                var number = 0;
                var length = 0;
                var time = setInterval(function () {
                    number += 1;
                    // 当滚动完后，从新开始
                    if (number == 2) {
                        clearInterval(time);
                        $('.layui-table-body').scrollTop('0');
                    } else {
                        // 设置这个高度滚动几次
                        length += height / 2;
                        $('.layui-table-body').scrollTop(length);  //只有此处有区别
                    }
                }, 3000);   // 设置时间，3秒滚动一次
            };

            setInterval(function () {
                table.reload('contentTable',{
                    method:'get'
                    ,page: {
                        curr: 1//重新从第 1 页开始
                    }
                });
                scrollBar();
            }, 6000);    //全部滚动一次需要6秒

        });

        /*setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
            window.location.reload();
        },300000);*/

    </script>

</body>
</html>

 

请问你是水呢
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui 滚动数据_layui 实现table翻页滚动条位置保持不变的例子
weixin_39808877的博客
12-18 847
最近使用了layui table但是发现了一系列问题，由于被封装过不好自己修改，比如翻页后滑动条每次都会复位，导致体验不好，通过调试，我发现layui table并没有给div加id标签，我通过class定位表格div位置。可以看到滚动条所在divclass="layui-table-body layui-table-main"我在layui table定义了一个父div,防止多个table时...
无缝隙轮播上下滚动(HTML+CSS+TP)
qq_51504905的博客
11-01 532
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewpo
固定表头和第一列、内容可滚动的table表格
03-24 346
https://www.jianshu.com/p/61c52ffced0c
Layui 动态表格无缝循环滚动的实现
wang_390486690的专栏
09-27 4962
// 表格滚动器 function TableScroller(tableContainer, interval) { // 响应鼠标事件 let that = this; tableContainer.on('mouseover', function () { that.pause(); }); tableContainer.on('mouseleave', function () { that.resume(); }); .
layui实现预览图片并可以滚动鼠标放大缩小图片
最新发布
清音的博客
06-20 420
首先通过绑定点击事件来打开图片预览。当点击事件触发时，获取被点击图片的链接和标题。事件，根据鼠标滚动的方向来计算图片的缩放比例，进而调整图片的宽度、高度和位置。方法中，通过传入一个包含图片信息的对象来配置预览的图片，其中包括图片标题和链接。回调函数中，实现了以鼠标位置为中心的滚动放大缩小功能。参数用于指定图片预览的动画效果。来获取相应的元素并进行样式调整。方法来打开图片预览。
Jsp整合LayUI table工具栏没有横向滚动条
qq_35752389的博客
01-02 903
Jsp整合LayUI table工具栏没有横向滚动条
table添加垂直滚动条
weixin_45997469的博客
07-22 1635
思路： 1、把tbody设置成display:block，然后就对其高度设置一个固定值，overflow设置成auto。 2、把thead的tr设置成display:block。 3、因为都设置成block所以要给td手动添加宽度 <table class="layui-table"> <thead> <tr style="display:block;"> <th style="width:20%"></th> <!-- 其
Layui - 数据表格 table
weixin_42361858的博客
12-03 3843
官网文档：https://www.layui.com/doc/modules/table.html 模块： layui.use('table', function(){ var table = layui.table; }); 目录 简单表格 参数 开放方法 方法 - 事件监听 简单表格 <!-- 注意class、layui参数、方法 --> <!-- 方法渲染 --> <table class="layui-table" id="simple"&gt.
layui问题之自动滚动二级iframe页面到指定位置的方法
10-16
今天小编就为大家分享一篇layui问题之自动滚动二级iframe页面到指定位置的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui 实现table翻页滚动条位置保持不变的例子
10-16
然而，在实际应用中，开发者可能会遇到一些小问题，比如在使用layui table进行数据分页时，滚动条的位置在翻页后会自动复位，这会破坏用户的浏览连续性，降低使用体验。为了解决这个问题，我们可以自定义一些...
解决layui数据表格table的横向滚动条显示问题
10-16
今天小编就为大家分享一篇解决layui数据表格table的横向滚动条显示问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
动态表格【悬浮表头并结合滚动条滚动表格内容】
09-29
使用bootstrap编写的动态表格【当滚动纵向的滚动条时，表格的表头处于悬浮状态，表格的内容滚动；当滚动横向的滚动条时，表格的表头和表格的内容对应着一起滚动】
layui自动填充插件autocomplete.rar
07-20
在layui中，"autocomplete"是一款自动填充插件，常用于输入框，提供智能提示功能，提高用户输入效率。这款插件适用于各种需要自动补全场景，如搜索框、表单填写等。 在layui的autocomplete插件中，主要涉及以下知识...
解决layui表格的表头不滚动的问题
10-16
本文将详细介绍如何解决 layui 表格表头不滚动的问题。 首先，我们需要理解问题的核心在于当表格内容超过可视区域时，只有tbody部分可以滚动，而thead部分固定不动。为了解决这个问题，我们可以采用一种分层的方法...
layui的基本组件使用
qq_62898618的博客
08-16 3652
主要功能：年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器 五种类型的选择方式为基本核心，并且均支持范围选择（即双控件）。模块加载名称：laydate一·基础参数选项 通过核心方法：laydate.render(options) 来设置基础参数，也可以通过方法：laydate.set(options) 来设定全局基础参数. elem - 绑定元素是必填项；...
layui 滚动到指定的行
baidu_24743861的博客
08-09 3239
varcellHtml=$(".layui-table-main").find("tr[data-index="+rowsNum+"]"); varcellTop=cellHtml.offset().top; $(".layui-table-main").scrollTop(cellTop-160);
layui框架——弹出层layer
热门推荐
meixu568的专栏
07-26 9万+
两种调用方法： 1、引用独立的layer.js文件 引入好layer.js后，直接用即可 <script src="layer.js"></script> <script> layer.msg('hello'); </script> 2、调用layui中的layer模块 layui.use('layer', function(){ ...
layui实现表格自动滚动
05-18
在layui中，可以通过table.render()方法来渲染表格，通过设置height属性可以控制表格的高度。如果表格中的数据过多，可以通过设置overflow属性来实现表格的自动滚动。 示例代码如下： ``` // 渲染表格 table.render({ elem: '#demo', height: 400, // 设置表格高度 url: '/demo/table/user/', // 数据接口 page: true, // 开启分页 cols: [[ // 表头 {field: 'id', title: 'ID', width: 80, sort: true}, {field: 'username', title: '用户名', width: 120}, {field: 'email', title: '邮箱', minWidth: 150}, {field: 'sex', title: '性别', width: 80, sort: true}, {field: 'city', title: '城市', width: 100}, {field: 'sign', title: '签名', width: 200}, {field: 'experience', title: '积分', width: 80, sort: true}, {field: 'score', title: '评分', width: 80, sort: true}, {field: 'classify', title: '职业', width: 100}, {field: 'wealth', title: '财富', width: 135, sort: true}, ]] }); // 设置表格的overflow属性 $('.layui-table-body').css('overflow', 'auto'); ``` 在上面的示例代码中，我们设置了表格的高度为400px，并通过url属性指定了数据接口。然后，我们通过设置表格的overflow属性来实现表格的自动滚动。 注意，我们需要设置的是表格体的overflow属性，而不是表头的。因为表头是固定在页面顶部的，不会随着表格内容的滚动而发生变化。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值