【Android H5移动开发】 MUI下拉刷新

最新推荐文章于 2024-03-13 17:28:07 发布

番茄发烧了

最新推荐文章于 2024-03-13 17:28:07 发布

阅读量4.3k

点赞数 3

分类专栏： Android移动开发 H5 文章标签： android 移动开发

本文链接：https://blog.csdn.net/bless2015/article/details/52688431

版权

Android移动开发同时被 2 个专栏收录

49 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

这里写图片描述

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="js/mui.min.js"></script>
        <link href="css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <!--下拉刷新容器-->
        <header class="mui-bar mui-bar-nav">
            <a id="back" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 id="title" class="mui-title">下拉刷新</h1>
        </header>

        <div class="mui-content"></div>
    </body>
    <script type="text/javascript">

        mui.init({
            subpages:[{
                url:'pullrefresh_sub.html',
                id:'pullrefresh_sub.html',
                styles:{
                    top: '45px',
                    bottom: '0px',
                }
            }]
        });

    </script>
</html>

pullrefresh_sub.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <link rel="stylesheet" href="css/mui.min.css">
        <script src="js/mui.min.js"></script>
    </head>

    <body>
        <!--下拉刷新容器-->
        <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
            <div class="mui-scroll">
                <!--数据列表-->
                <ul class="mui-table-view mui-table-view-chevron">

                </ul>
            </div>
        </div>

        <script>
            mui.init({
                pullRefresh: {
                    container: '#pullrefresh',
                    down: {
                        callback: pulldownRefresh
                    }
                }
            });
            /**
             * 下拉刷新具体业务实现
             */
            function pulldownRefresh() {
                setTimeout(function() {
                    //找出body标签下所有class为mui-table-view的标签
                    var table = document.body.querySelector('.mui-table-view');
                    var cells = document.body.querySelectorAll('.mui-table-view-cell');
                    for (var i = cells.length, len = i + 1; i < len; i++) {
                        var li = document.createElement('li');
                        //设置mui样式
                        li.className = 'mui-table-view-cell';
                        //文字
                        li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
                        //下拉刷新，新纪录插到最前面；
                        table.insertBefore(li, table.firstChild);
                    }
                    mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
                }, 500);
            }

        </script>
    </body>

</html>

番茄发烧了

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Android H5移动开发】 MUI下拉刷新

index.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
复制链接

扫一扫