mui下拉刷新总结

最新推荐文章于 2023-07-15 22:27:10 发布

先来个小漩涡

最新推荐文章于 2023-07-15 22:27:10 发布

阅读量524

点赞数

分类专栏：基本文章标签： mui下拉刷新总结

本文链接：https://blog.csdn.net/weixin_43023873/article/details/99946520

版权

基本专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.话不多说，先来个小漩涡
2.mui原生html js 使用拉框架上代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>我的素材</title>
    <meta name="keywords" content="<%= seo_keywords %>" />
    <meta name="description" content="<%= seo_content %>" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-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 href="/mui/css/mui.min.css" rel="stylesheet" />
    <link href="/mui/css/app.css" rel="stylesheet" />
    <link href="/mui/css/icons-extra.css" rel="stylesheet" />
    
    <link href="css/source_material.css" rel="stylesheet" />
    
    <style>
        .ulBox{
            padding-right:1rem;
            display:flex;
            flex-wrap: wrap;
            background-color:#efeff4;
        }
        .imgListdata{
            height:10rem;
            width:50%;
            padding:1rem 0rem 0 1rem;
        }
        .coures-list-a{
            height:100%;
        }
        .contbox{
            background-color:#fff;
            height:100%;
            border-radius:0.5rem 0.5rem 0 0;
            position:relative;
            /*box-shadow:0px 0px 7px #BFBFBF;*/ 
             overflow:hidden;
        }
        .contbox img{
            width:100%;
            /*border-radius:1rem;*/
        }
        .contbox  .textTite{
            background-color:#fff;
            
           height:2rem;
           line-height:2rem;
           text-align:center;
            position:absolute;
            bottom:0rem;
            width:100%;
            /*border-radius:0 0 0.4rem 0.4rem;*/
        }
        .coures-list-a{
            display: block;
            text-decoration: none;
            overflow: hidden;
        }
        #refreshContainer{
            margin-top:60px;
               background-color: #efeff4;

        }
        .mui-scroll{
             
        }
    </style>

</head>
<body>


    <header class="mui-bar mui-bar-nav" style="padding-left:0;padding-right:0;">
        <div>
            <img src="img/1.png" alt="Alternate Text" style="width:100%;" />
        </div>
    </header>

    <div id="refreshContainer" class="mui-content mui-scroll-wrapper">
        <div class="mui-scroll">
            <!--数据列表-->
            <ul class="mui-table-view ulBox"></ul>
        </div>

    </div>
    <!--<div>-->
        
        <!--<ul class="ulBox">
            
        </ul>-->
        <!--下拉刷新容器-->
        
    <!--</div>-->
</body>
<script type="text/javascript" src="/scripts/jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/scripts/jquery/jquery.lazyload.min.js"></script>
<script type="text/javascript" src="/js/responsive.js"></script>
<script type="text/javascript" src="/mui/js/mui.min.js"></script>
<!--<script type="text/javascript" src="/u/js/common.js"></script>-->
<script>


    let pagesize = 10;
    let pageindex = 0;

    $(document).on('tap', '.imgListdata a', function () { document.location.href = this.href; })
   

    mui.init({
        pullRefresh: {
            container: "#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
            down: {
                height: 50,//可选,默认50.触发下拉刷新拖动距离,
                auto: true,//可选,默认false.首次加载自动下拉刷新一次
                contentdown: "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
                contentover: "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
                contentrefresh: "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
                callback: callfunction //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
            }
        }
    });
    function callfunction() {
        setTimeout(function () {//定时器，提升用户体验
            //实现更新页面的操作，一般上就是ajax请求数据，页面动态加载元素
            pageindex += 1;
            $.post('/webApi/Material/GetMaterialList', { pageindex: pageindex, pagesize: 10 }, function (data) {


                if (data.IsSuccess) {

                    console.log(data.Result)
                    let htmlField = '';
                    $.each(data.Result, function (n, t) {
                        htmlField += '<li class="imgListdata">';
                        htmlField += '<a class="coures-list-a" href="/u/community/sm_details.html?id=' + t.id + '&type=' + t.img_url + '"">'
                        htmlField += '<div class="contbox">';
                        htmlField += '<img src="' + t.img_url + '" alt="图片" />';
                        htmlField += ' <div class="textTite">';
                        htmlField += ' <p style="color:black;">' + t.title + '</p>';
                        htmlField += '</div></div></a></li>';

                    });
                    $('.ulBox').append(htmlField);

                } else {
                    console.log(data.ErrorMsg)
                    mui.alert(data.ErrorMsg, '确定', function () {
                    })

                }
            });
            //mui.toast('刷新成功');
            mui('#refreshContainer').pullRefresh().endPulldownToRefresh(); //完成刷新
        }, 1500);
    }




   


    


    
   
    
</script>
</html>

3.over

先来个小漩涡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
mui下拉刷新总结

1.话不多说，先来个小漩涡2.mui原生html js 使用拉框架上代码<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&g...
复制链接

扫一扫