mui选项卡切换+上拉刷新（div模式）

最新推荐文章于 2021-06-09 11:42:02 发布

原创最新推荐文章于 2021-06-09 11:42:02 发布 · 614 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #html

mui 专栏收录该内容

1 篇文章

订阅专栏

这是一个关于MUI框架实现选项卡切换和上拉刷新功能的示例代码。通过使用div模式，代码展示了如何在多个选项卡间切换，并在每个选项卡内实现内容的下拉刷新效果，适用于移动端Web开发。示例中包含了HTML结构、CSS样式以及可能的数据遍历逻辑。

mui选项卡切换+上拉刷新（div模式）

mui选项卡切换+上拉刷新（div模式）
- - 效果
- 代码

mui选项卡切换+上拉刷新（div模式）

效果

. 在这里插入图片描述

代码

<%–
Created by IntelliJ IDEA.
User: Administrator
Date: 2020/12/13
Time: 21:49
To change this template use File | Settings | File Templates.
–%>
<%@ page language=“java” contentType=“text/html; charset=UTF-8” pageEncoding=“UTF-8” %>
<%@ taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core” %>
<%@ taglib prefix=“fmt” uri=“http://java.sun.com/jstl/fmt_rt” %>

Hello MUI

<link href="${_contextPath}/static/css/h5/mui.min.css" rel="stylesheet" />
<!--App自定义的css-->
<style>
    html,
    body {
        background-color: #efeff4;
    }
    .mui-bar~.mui-content .mui-fullscreen {
        top: 44px;
        height: auto;
    }
    .mui-pull-top-tips {
        position: absolute;
        top: -20px;
        left: 50%;
        margin-left: -25px;
        width: 40px;
        height: 40px;
        border-radius: 100%;
        z-index: 1;
    }
    .mui-bar~.mui-pull-top-tips {
        top: 24px;
    }
    .mui-pull-top-wrapper {
        width: 42px;
        height: 42px;
        display: block;
        text-align: center;
        background-color: #efeff4;
        border: 1px solid #ddd;
        border-radius: 25px;
        background-clip: padding-box;
        box-shadow: 0 4px 10px #bbb;
        overflow: hidden;
    }
    .mui-pull-top-tips.mui-transitioning {
        -webkit-transition-duration: 200ms;
        transition-duration: 200ms;
    }
    .mui-pull-top-tips .mui-pull-loading {
        /*-webkit-backface-visibility: hidden;
        -webkit-transition-duration: 400ms;
        transition-duration: 400ms;*/

        margin: 0;
    }
    .mui-pull-top-wrapper .mui-icon,
    .mui-pull-top-wrapper .mui-spinner {
        margin-top: 7px;
    }
    .mui-pull-top-wrapper .mui-icon.mui-reverse {
        /*-webkit-transform: rotate(180deg) translateZ(0);*/
    }
    .mui-pull-bottom-tips {
        text-align: center;
        background-color: #efeff4;
        font-size: 15px;
        line-height: 40px;
        color: #777;
    }
    .mui-pull-top-canvas {
        overflow: hidden;
        background-color: #fafafa;
        border-radius: 40px;
        box-shadow: 0 4px 10px #bbb;
        width: 40px;
        height: 40px;
        margin: 0 auto;
    }
    .mui-pull-top-canvas canvas {
        width: 40px;
    }
    .mui-slider-indicator.mui-segmented-control {
        background-color: #efeff4;
    }
</style>

选项卡切换+下拉刷新（div模式）

                    <c:choose>
                        <c:when test="${index.count == 1}">
                            <a data-id="${item.id}" class="mui-control-item mui-active" href="#item${item.id}mobile">
                                    ${item.name}
                            </a>
                        </c:when>
                        <c:otherwise>
                            <a data-id="${item.id}" class="mui-control-item" href="#item${item.id}mobile">
                                    ${item.name}
                            </a>
                        </c:otherwise>
                    </c:choose>
                </c:forEach>
            </c:if>
        </div>
    </div>
    <div class="mui-slider-group">
        <c:if test="${not empty buyerTypeList}">
            <c:forEach items="${buyerTypeList}" var="item" varStatus="i">
                <c:choose>
                    <c:when test="${i.count==1}">
                        <div id="item${item.id}mobile" class="mui-slider-item mui-control-content mui-active">
                            <div id="scroll${item.id}" class="mui-scroll-wrapper">
                                <div class="mui-scroll">
                                    <ul class="mui-table-view">
                                        <li class="mui-table-view-cell">
                                            第${item.id}个选项卡子项-1
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第${item.id}个选项卡子项-2
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第${item.id}个选项卡子项-3
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第${item.id}个选项卡子项-4
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第${item.id}个选项卡子项-5
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第${item.id}个选项卡子项-6
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第${item.id}个选项卡子项-7
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第${item.id}个选项卡子项-8
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第${item.id}个选项卡子项-9
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第${item.id}个选项卡子项-10
                                        </li>

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </c:when>
                    <c:otherwise>
                        <div id="item${item.id}mobile" class="mui-slider-item mui-control-content">
                            <div id="scroll${item.id}" class="mui-scroll-wrapper">
                                <div class="mui-scroll">
                                    <ul class="mui-table-view">
                                        <li class="mui-table-view-cell">
                                            第${item.id}个选项卡子项-1
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第${item.id}个选项卡子项-2
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第${item.id}个选项卡子项-3
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第${item.id}个选项卡子项-4
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第${item.id}个选项卡子项-5
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第${item.id}个选项卡子项-6
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第${item.id}个选项卡子项-7
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第${item.id}个选项卡子项-8
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第${item.id}个选项卡子项-9
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第${item.id}个选项卡子项-10
                                        </li>

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </c:otherwise>
                </c:choose>

            </c:forEach>
        </c:if>
    </div>
</div>