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

最新推荐文章于 2023-07-10 16:31:41 发布

黑衣如墨剑如雪

最新推荐文章于 2023-07-10 16:31:41 发布

阅读量1.1k

点赞数

分类专栏：前端

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

版权

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

摘要由CSDN通过智能技术生成

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

效果

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="in

最低0.47元/天解锁文章

黑衣如墨剑如雪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
类型tab切换及数据展示（tab切换、数据动态展示（左/右）、返回上一级等）

作为一个前端菜鸟，记一下，方便自己以后翻阅效果businessIncomeRecord.html<#assign base=base.contextPath /><!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-...
复制链接

扫一扫

专栏目录