mui:选项卡切换+上拉加载+ajax

最新推荐文章于 2025-06-09 09:04:45 发布

foxqi

最新推荐文章于 2025-06-09 09:04:45 发布

阅读量1.4w

点赞数 12

CC 4.0 BY-SA版权

分类专栏： mui 文章标签： mui mui选项卡+下拉刷新+ajax mui选项卡和下拉刷新 mui选项卡切换和下拉刷新

本文链接：https://blog.youkuaiyun.com/qq_38586903/article/details/82910549

本文介绍了如何使用mui框架结合Ajax实现选项卡切换、上拉加载功能。详细讲解了页面初始化请求、滑动触发下一页加载及数据结束的处理，提供了关键代码和注意事项，适合需要在h5中实现动态数据加载的开发者参考。

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

因最近开发h5用的前端框架是mui,教程和demo大部分没有动态数据，在网上也没有很好的办法，比较喜欢简单粗暴就直接上代码了。

1.mui:选项卡切换+上拉加载+ajax

1.1关于mui的选项卡切换的样式，mui的官网上有，在这就不多说了

官网的位置

选项卡切换+上拉加载

1.2 直接上代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello MUI</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="/css/mui.min.css">
</head>

<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">选项卡切换+上拉加载</h1>
		</header>

<div class="mui-content gooding">
    <div class="blueHeaderBg"></div>
    <div id="slider" class="mui-slider mui-fullscreen">
        <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <div class="titleList">
                <a class="mui-control-item paddingNone mui-active " href="#item1mobile" data-id="0"  >
                    全部
                </a>
                <a class="mui-control-item paddingNone" href="#item2mobile" data-id="1"  >
                    待审核
                </a>
                <a class="mui-control-item paddingNone" href="#item3mobile" data-id="2" >
                    派单中
                </a>
                <a class="mui-control-item paddingNone" href="#item4mobil