类型tab切换及数据展示（tab切换、数据动态展示（左/右）、返回上一级等）

本文链接：https://blog.csdn.net/suchenbin/article/details/103617088

这篇博客记录了前端菜鸟在实现类型Tab切换及数据动态展示过程中的经验，包括业务收入记录页面的实现，涉及后端接口调用，如获取业务类型和不同状态的数据。同时，博主欢迎读者提出宝贵意见进行交流。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作为一个前端菜鸟，记一下，方便自己以后翻阅

效果

businessIncomeRecord.html

<#assign base=base.contextPath />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>收款记录</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../../h5-web/resources/css/swiper.min.css">
<link rel="stylesheet" href="../../h5-web/resources/jquery-weui/dist/lib/weui.min.css">
<link rel="stylesheet" href="../../h5-web/resources/jquery-weui/dist/css/jquery-weui.css">
<style type="text/css">
    body {
        background:#fff;
        font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
        font-size:12px;
    }
    * {
        padding:0;
        margin:0;
    }
    li {
        list-style:none;
    }
    #top {
        position:fixed;
        top:0;
        z-index:5;
        width:100%;
        background:#fff;
    }
    .go-back {
        height: 30px;
        width: 100%;
        text-align: left;
        background-color: #46A3FF;
        padding: 5px 5px;
    }
    .go-back input {
        width: 2.8rem;
        height: 1.5rem;
        line-height: 19px;
        border: 1px solid #ccc;
        font-size: 17px;
        background: #ffffff;
        color: #000000;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
    }
    .summary{
        position:relative;
    }
    .summaryCount{
        position:absolute;
        top:0px;
        left:0px;
        width:48%;  
        height:100%; 
    }
    .summaryMoney{
        position:absolute;
        top:0px;
        right:5px;
        width:48%;  
        height:100%; 
    }
    .content{
        position: absolute;
        height: 50px;
        border-left: 1px solid #F0F0F0;
        left: 50%;
        top: 15px;
    }
    .totalAmount{
        margin: 0 auto;
        height:40px;
        line-height: 30px;
        font-size:23px;
        text-align:center;
        color:#01b49f;
        position: relative;
        top: 8px;
    }
    .totalDesc{
        text-align:center;
        margin: 0 auto;
        height:22px;
        line-height: 19px;
        font-size:14px;
        color:#000000;
        position: relative;
        top: 50%;
    }
    #nav .swiper-slide span {
        text-align:center;
        display:block;
        line-height:2.5;
        font-size:14px;
        color:#333333;
    }
    .default_span{
        color:#ffffff;
        background-color:#01b49f;
    }
    #nav .bar {
        width:50px;
        height:3px;
        position:absolute;
        bottom:0px;
    }
    #nav .bar .color {
        width:36px;
        margin:0 auto;
        height:3px;
        background:#ff4891;
    }
    #page {
        margin-top: 8.7rem;
        height:100%;
    }
    .amount-type{
        line-height: 19px;
        height: 19px;
        font-size:17px;
        float:left;
    }
    .payAmount{
        line-height: 19px;
        height: 19px;
        font-size:17px;
        float:right;
        color:#000000;
    }
    .incomeAmount{
        line-height: 19px;
        height: 19px;
        font-size:17px;
        float:right;
        color:#01b49f;
    }
    .sj{
        position: absolute;
        bottom: 0.1rem;
        display: flex;
        flex-direction: row;
        width: 40%;
        height: 0.8rem;
        line-height: 0.8rem;
        float:left;
    }
    #container{
        width:550px; height: 300px; 
    }
</style>
</head>
<body ontouchstart>
<div id="top">
    <div class="go-back">
        <input name="back" type="button" value="返回" onclick="goBack()"/>
    </div> 
    <div style="height: 0.3rem; background-color: #eeeeee"></div>
    <div class="total_money" id="total" style="background-color: #ffffff;height:80px"></div>
    <div style="height: 0.3rem; background-color: #eeeeee"></div>
    <div class="swiper-container" id="nav"></div>
    <div style="height: 0.3rem; background-color: #eeeeee"></div>
</div>
<div class="infinite" id="page">
    <ul class="content-list" id="content-list1">
    </ul>
    <div class="weui-loadmore" style="display: none;">
        <i class="weui-loading"></i>
        <span class="weui-loadmore__tips">正在加载</span>
    </div>
</div>

<div id='container' style="display: none;"></div>


<script type="text/javascript" src="../../h5-web/resources/js/jquery/jquery-3.2.1.min.js" charset="utf-8"></script>
<script type='text/javascript' src='../../h5-web/resources/jquery-weui/dist/lib/fastclick.js' charset='utf-8'></script>
<script type='text/javascript' src='../../h5-web/resources/jquery-weui/dist/js/jquery-weui.min.js' charset='utf-8'></script>
<script type="text/javascript" src="../../h5-web/resources/js/swiper/swiper.min.js" charset="utf-8"></script>
<script type="text/javascript" src = 'http://webapi.amap.com/maps?v=1.4.0&key=c22c7110f5cb7b62e26df01c3d972627&plugin=AMap.CitySearch'></script>
<script type='text/javascript' src='../../h5-web/resources/js/base64.min.js' charset='utf-8'></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
  <script type='text/javascript'>
    var page = 1;// 分页数
    var row = 10;// 页面数据
    var loading = true;// 滚动加载状态标记 false:加载 true:禁止加载
    var shopId = "${shopId!''}";
    var typeId = "${typeId!''}";
    var isclear = 0;
    
    $(document).ready(function(){
        getType();
        getBusinessIncomeRecord(shopId,typeId);
        // 滚动加载
        $(document.body).infinite().on("infinite", function() {
            if (loading) return;
            // 隔一秒才关闭刷新显示
            setTimeout(function() {
                getBusinessIncomeRecord(shopId,typeId);
            }, 2000); 
        });
    });

    function getType(){
        $.ajax({  
            type: "GET",
            dataType: "json",
            url: "${base}/integral/getBusinessType",
            cache : false,
            async : false,
            success: function(data){
                if (data && data.code=="0"){
                    var businessTypeList = data.data;
                    var rows = '<div class="swiper-wrapper">';
                    for ( var i = 0; i < businessTypeList.length; i++) {
                        rows+='<div class="swiper-slide" id="'+businessTypeList[i].value+'">';
                        if(i == 0){
                            rows+='<span class="default_span">'+businessTypeList[i].title+'</span></div>';
                        }else{ 
                            rows+='<span>'+businessTypeList[i].title+'</span></div>';
                        }
                    }
                    rows+='</div>';
                    $("#nav").append(rows);
                    
                    //暂时设计每个slide大小需要一致
                    barwidth = 36; //导航粉色条的长度px
                    tSpeed = 300; //切换速度300ms
                    var navSwiper = new Swiper('#nav', {
                        slidesPerView: businessTypeList.length,//能够同时显示的slides数量
                        freeMode: true,
                        on: {
                            init: function() {
                                navSlideWidth = this.slides.eq(0).css('width'); //导航字数需要统一,每个导航宽度一致
                                navSum = this.slides[this.slides.length - 1].offsetLeft; //最后一个slide的位置
                    
                                clientWidth = parseInt(this.$wrapperEl.css('width')); //Nav的可视宽度
                                navWidth = 0;
                                for (i = 0; i < this.slides.length; i++) {
                                    navWidth += parseInt(this.slides.eq(i).css('width'));
                                }
                                topBar = this.$el.parents('body').find('#top'); //页头
                            },
                        },
                        scrollbar: {
                            el: '.swiper-scrollbar',
                        },
                    });
                    navSwiper.scrollbar.$dragEl.css('background','#ff4891');

                    navSwiper.$el.on('touchstart', function(e) {
                        e.preventDefault(); //去掉按压阴影
                    });
                    navSwiper.on('tap', function(e) {
                        clickIndex = this.clickedIndex;
                        clickSlide = this.slides.eq(clickIndex);
                        typeId = clickSlide.attr('id');
                        isclear = 1;
                        page = 1;// 初始化页面数
                        //获取收入记录数据
                        getBusinessIncomeRecord(shopId,typeId);
                        
                        this.slides.find('span').css('color', '#343434');
                        this.slides.find('span').css('background-color', '#ffffff');
                        clickSlide.find('span').css('color', '#ffffff');
                        clickSlide.find('span').css('background-color', '#01b49f');
                    });
                    typeId = businessTypeList[0].value;
                } else {  
                    $.toast(data.codeMsg);  
                }
            },error:function(data){
                $.toast("网络连接超时");
            }
        });
    }
    
    //获取收入记录数据
    function getBusinessIncomeRecord(shopId,typeId){
        loading = true;
        if(isclear == 1){
            $("#content-list1").empty();
        }
        isclear = 0;
        $.ajax({
            type: "GET",
            url: "${base}/integral/businessIncomeRecord",
            data:{page:page,row:row,shopId:shopId,typeId:typeId},
            cache : false,
            async : false,
            dataType: "json",
            success: function(resp){
                page++;// 页面数+1
                if (resp && resp.code=="0"){
                    if (resp.data) {
                        var amountRows= '<div class="summary"><div class="summaryCount">';
                        amountRows += '<div class="totalAmount">' + resp.data.recordCount + '</div><div class="totalDesc">' + resp.data.recordDesc + '</div>';
                        amountRows += '</div>';
                        amountRows += '<div class="content"></div>';
                        amountRows += '<div class="summaryMoney">';
                        amountRows += '<div class="totalAmount">' + resp.data.moneySummary + '</div><div class="totalDesc">' + resp.data.moneyDesc + '</div>';
                        amountRows += '</div></div>';
                        $("#total").html('');
                        $("#total").append(amountRows);
                        var recordList = resp.data.recordList;
                        if(recordList.length>0){
                            var rows = '<div class="page__bd">';
                            rows+= '<div class="weui-panel weui-panel_access">';
                            rows+= '<div class="weui-panel__bd">';
                            for ( var i = 0; i < recordList.length; i++) {
                                rows+='<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg" style="position:relative;height:35px;top:-15px;margin-top:10px" '
                                + ' onclick="toRecordInfo(\'' + recordList[i].id + '\')">';
                                rows+='<div class="weui-media-box__bd phones-name-div">';
                                rows+='<h4 class="weui-media-box__title amount-type">'+recordList[i].amountType;
                                rows+='</h4>';
                                if('-' == recordList[i].amount.substring(0,1)) {
                                    rows+='<h4 class="weui-media-box__title payAmount">'+recordList[i].amount;
                                    rows+='</h4>';
                                }else {
                                    rows+='<h4 class="weui-media-box__title incomeAmount">'+recordList[i].amount;
                                    rows+='</h4>';
                                }
                                rows+='</div>';
                                rows+='<div class="sj">';
                                rows+='<div class="weui-media-box__desc">'+recordList[i].time+'</div>';
                                rows+='</div>';
                                rows+='</a>';
                            }
                            rows+= '</div></div></div>';
                            $("#content-list1").append(rows);
                            
                            if(recordList.length>=row){
                                $(".weui-loadmore").css("display","block");
                                loading = false;
                            }else{
                                $(".weui-loadmore").css("display","none");
                                loading = true;
                            }
                        }else {
                            $(".weui-loadmore").css("display","none");
                            loading = true;
                        }
                    }else {
                        $(".weui-loadmore").css("display","none");
                        loading = true;
                    }
                } else {
                    $.toast(resp.codeMsg);  
                }
            },
            error: function(){
                $.toast("网络连接超时");
            }
        });
    }

    // 跳转收入记录详情
     function toRecordInfo(id){
        location.href = "${base}/integral/toRecordInfoPage?id="+id;
    } 

    // 返回
    function goBack() {
        location.href = "${base}/integral/toBusinessIncomePage";//修改成返回上一级的路径，暂时先写成这样
    }

    window.addEventListener("popstate", function(e) { 
        closeWebView();
    }, false);
    window.history.pushState('forward', null, '#'); 
    window.history.forward(1);
    
    //调用Native分享
    function closeWebView() {
        //调用本地java方法
        window.WebViewJavascriptBridge.callHandler(
            'closeWebView',{
            },function(responseData) {}
        );
    }
    
    //注册事件监听
    function connectWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) {
        callback(WebViewJavascriptBridge)
    } else {
        document.addEventListener('WebViewJavascriptBridgeReady',
        function() {
            callback(WebViewJavascriptBridge)
        }, false);
    }
    }
    //注册回调函数，初始化函数
    connectWebViewJavascriptBridge(
    function(bridge) {
        bridge.init(function(message, responseCallback) {
            console.log('JS got a message', message);
            var data = {'Javascript Responds' : 'Wee!'};
            console.log('JS responding with', data);
            responseCallback(data);
        });

        bridge.registerHandler("getpicturebyte",function(data, responseCallback) {
                document.getElementById("show").innerHTML = ("data from Java: = " + data);
                var responseData = "JS已接收Native的参数传值，发送消息接收回执!";
                responseCallback(responseData);
        });
    }
    )
    
</script>
  
</body>
</html>

其他引入的css文件和js文件略

后端代码

    /**
     * 跳转商家收入页面
     * @param request HttpServletRequest
     * @return 页面跳转
     * @author sucb
     * @date 2019-12-18
     */
    @RequestMapping(value = "toBusinessIncomePage", method = RequestMethod.GET)
    public Object toBusinessIncomePage(HttpServletRequest request) {
        ModelAndView mv = null;
//        String userId = request.getSession().getAttribute("userId")== null ?
//                "" : request.getSession().getAttribute("userId").toString();
        String userId = "1522327838345001"; // web页面模拟测试，暂时写死userId
        try {
            mv = new ModelAndView();
            mv.addObject("shopId", integralService.getShopId(userId));
            mv.setViewName("/web/integral/businessIncomeRecord");
        } catch (Exception e) {
            mv = new ModelAndView("/web/common/reloading");
        }
        return mv;
    }

    /**
     * 获取商家收款类型
     * @return 收款类型
     * @author sucb
     * @date 2019-12-18
     */
    @RequestMapping(value = "getBusinessType", method = RequestMethod.GET)
    @ResponseBody
    public Object getBusinessType() {
        try {
            return actionSuccessResultToJson("获取数据成功", integralService.getBusinessType());
        } catch (BaseRuntimeException e) {
            String msg = e.getMessage();
            if ("".equals(msg)) {
                msg = "获取数据失败";
            }
            return actionFailResultToJson(msg, null);
        }
    }

    /**
     * 获取商铺收款记录
     * @param shopId 商铺id
     * @param page 页码
     * @param row 每页记录数
     * @param typeId 商铺收款类型
     * @return 收款记录
     * @author sucb
     * @date 2019-12-18
     */
    @RequestMapping(value = "businessIncomeRecord", method = RequestMethod.GET)
    @ResponseBody
    public Object businessIncomeRecord(@RequestParam("shopId") String shopId,@RequestParam(defaultValue="1") String page,
            @RequestParam(defaultValue="10") String row,@RequestParam(defaultValue="1") String typeId) {
        try {
            int pageInt = Integer.parseInt(page);
            int rowInt = Integer.parseInt(row);
            pageInt = pageInt > 0 ? pageInt : 1;
            int start = (pageInt - 1) * rowInt + 1;
            int end = pageInt * rowInt;
            Map<String,Object> param = new HashMap<String,Object>();
            param.put("shopId", shopId);
            param.put("start", start);
            param.put("end", end);
            param.put("type", typeId);
            return actionSuccessResultToJson("获取数据成功", integralService.getBusinessIncomeRecord(param));
        } catch (Exception e) {
            e.printStackTrace();
            String msg = e.getMessage();
            if ("".equals(msg)) {
                msg = "获取数据失败";
            }
            return actionFailResultToJson(msg, null);
        }
    }

具体接口代码省略，测试返回值如下所示

1、getBusinessType接口

{"code":"0","codeMsg":"获取数据成功","data":[{"title":"全部","value":"1"},{"title":"已收入","value":"2"},{"title":"已退款","value":"3"}]}

2、businessIncomeRecord接口

1）、全部

{"code":"0","codeMsg":"获取数据成功","data":{"recordCount":3,"recordList":[{"amount":"+8.98","id":5,"time":"2019-12-19 00:00:00","transactionId":11111111,"ROWNO":1,"amountType":"收入"},{"amount":"+14.95","id":6,"time":"2019-12-19 00:00:00","transactionId":22222222,"ROWNO":2,"amountType":"收入"},{"amount":"+19.92","id":7,"time":"2019-12-19 00:00:00","transactionId":33333333,"ROWNO":3,"amountType":"收入"},{"amount":"-24.38","id":8,"time":"2019-12-02 00:00:00","transactionId":44444444,"ROWNO":4,"amountType":"退款"}],"moneyDesc":"累计收款（元）","moneySummary":"43.85","recordDesc":"累计收款笔数"}}

2）、已收入

{"code":"0","codeMsg":"获取数据成功","data":{"recordCount":2,"recordList":[{"amount":"+8.98","id":5,"time":"2019-12-19 00:00:00","transactionId":11111111,"ROWNO":1,"amountType":"收入"},{"amount":"+14.95","id":6,"time":"2019-12-19 00:00:00","transactionId":22222222,"ROWNO":2,"amountType":"收入"}],"moneyDesc":"累计收款（元）","moneySummary":"23.93","recordDesc":"累计收款笔数"}}

3）、已退款

{"code":"0","codeMsg":"获取数据成功","data":{"recordCount":1,"recordList":[{"amount":"-24.38","id":8,"time":"2019-12-02 00:00:00","transactionId":44444444,"ROWNO":1,"amountType":"退款"}],"moneyDesc":"累计退款（元）","moneySummary":"24.38","recordDesc":"累计退款笔数"}}

【详情页面】

如果有写的不对的地方，请大家多多批评指正，非常感谢！