mui-侧面选项卡+上拉刷新

最新推荐文章于 2021-05-31 01:43:29 发布
苦逼的全栈工程师
最新推荐文章于 2021-05-31 01:43:29 发布
阅读量1.8k
点赞数 1
分类专栏： js效果文章标签：左侧tab 上拉刷新
本文链接：https://blog.csdn.net/a6749920/article/details/83625360
版权
js效果专栏收录该内容
3 篇文章 0 订阅
订阅专栏
效果图：
代码：
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no, email=no"/>
    <meta charset="UTF-8">
    <title>mui</title>
    <link rel="stylesheet" href="__CSS__/mui.min.css">
    <script src="__WECHAT__/js/jquery.min.js"></script>
    <script src="__JS__/mui-wx.min.js"></script>
    <script src="__JS__/mui.pullToRefresh.js"></script>
    <script src="__JS__/mui.pullToRefresh.material.js"></script>
    <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;
        }

        .mui-plus header.mui-bar {
            display: none;
        }

        .mui-plus .mui-bar-nav ~ .mui-content {
            padding: 0;
        }

        /*hm开头的表示仅为 Hello MUI示例定义*/
        .hm-description {
            margin: .5em 0;
        }

        .hm-description > li {
            font-size: 14px;
            color: #8f8f94;
        }

        .mui-row.mui-fullscreen > [class*="mui-col-"] {
            height: 100%;
        }

        .mui-col-xs-3,
        .mui-control-content {
            overflow-y: auto;
            height: 100%;
        }

        .mui-segmented-control .mui-control-item {
            line-height: 50px;
            width: 100%;
        }

        .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
            background-color: #fff;
        }

        .mui-scroll-wrapper {
            position: absolute;
            z-index: 2;
            top: 0;
            bottom: 0;
            left: 0;
            overflow-y: auto;
            width: 100%;
        }
    </style>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-pull-left "></a>
    <h1 class="mui-title">侧面选项卡-上拉刷新</h1>
</header>
<div class="mui-content mui-row mui-fullscreen">
    <div class="mui-col-xs-3">
        <div id="segmentedControls"
             class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
        </div>
    </div>
    <div class="mui-slider-group" style="-webkit-transform: translate3d(0px, 0px, 0px) translateZ(0px); -webkit-transition: 0ms; transition: 0ms;    width: 75%;
    float: right;
    height: 100%;">
        <div id="item1" class="mui-slider-item mui-control-content mui-active">
            <div id="scroll1" class="mui-scroll-wrapper" data-scroll="2">
                <div class="mui-scroll">
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell">
                            第1个选项卡子项-1
                        </li>
                        <li class="mui-table-view-cell">
                            第1个选项卡子项-2
                        </li>
                        <li class="mui-table-view-cell">
                            第1个选项卡子项-3
                        </li>
                        <li class="mui-table-view-cell">
                            第1个选项卡子项-4
                        </li>
                        <li class="mui-table-view-cell">
                            第1个选项卡子项-5
                        </li>
                        <li class="mui-table-view-cell">
                            第1个选项卡子项-6
                        </li>
                        <li class="mui-table-view-cell">
                            第1个选项卡子项-7
                        </li>
                        <li class="mui-table-view-cell">
                            第1个选项卡子项-8
                        </li>
                    </ul>
                    <div class="mui-pull-bottom-tips">
                        <div class="mui-pull-bottom-wrapper"><span class="mui-pull-loading">上拉显示更多</span></div>
                    </div>
                </div>
                <div class="mui-scrollbar mui-scrollbar-vertical"
                     style="-webkit-transition: 500ms; transition: 500ms; opacity: 0;">
                    <div class="mui-scrollbar-indicator"
                         style="-webkit-transition: 0ms; transition: 0ms; display: block; height: 252px; -webkit-transform: translate3d(0px, 233px, 0px) translateZ(0px);"></div>
                </div>
            </div>
        </div>
        <div id="item2" class="mui-slider-item mui-control-content">
            <div class="mui-scroll-wrapper" data-scroll="3">
                <div class="mui-scroll" style="-webkit-transform: translate3d(0px, 0px, 0px) translateZ(0px);">
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell">
                            第2个选项卡子项-1
                        </li>
                        <li class="mui-table-view-cell">
                            第2个选项卡子项-2
                        </li>
                        <li class="mui-table-view-cell">
                            第2个选项卡子项-3
                        </li>
                        <li class="mui-table-view-cell">
                            第2个选项卡子项-4
                        </li>
                        <li class="mui-table-view-cell">
                            第2个选项卡子项-5
                        </li>
                    </ul>
                    <div class="mui-pull-bottom-tips">
                        <div class="mui-pull-bottom-wrapper"><span class="mui-pull-loading">上拉显示更多</span></div>
                    </div>
                </div>
                <div class="mui-scrollbar mui-scrollbar-vertical">
                    <div class="mui-scrollbar-indicator"
                         style="-webkit-transition: 0ms; transition: 0ms; display: block; height: 390px; -webkit-transform: translate3d(0px, 0px, 0px) translateZ(0px);"></div>
                </div>
            </div>
        </div>
        <div id="item3" class="mui-slider-item mui-control-content">
            <div class="mui-scroll-wrapper" data-scroll="4">
                <div class="mui-scroll" style="-webkit-transform: translate3d(0px, 0px, 0px) translateZ(0px);">
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell">
                            第3个选项卡子项-1
                        </li>
                        <li class="mui-table-view-cell">
                            第3个选项卡子项-2
                        </li>
                        <li class="mui-table-view-cell">
                            第3个选项卡子项-3
                        </li>
                        <li class="mui-table-view-cell">
                            第3个选项卡子项-4
                        </li>
                    </ul>
                    <div class="mui-pull-bottom-tips">
                        <div class="mui-pull-bottom-wrapper"><span class="mui-pull-loading">上拉显示更多</span></div>
                    </div>
                </div>
                <div class="mui-scrollbar mui-scrollbar-vertical">
                    <div class="mui-scrollbar-indicator"
                         style="-webkit-transition: 0ms; transition: 0ms; display: block; height: 390px; -webkit-transform: translate3d(0px, 0px, 0px) translateZ(0px);"></div>
                </div>
            </div>
        </div>
        <div id="item4" class="mui-slider-item mui-control-content">
            <div class="mui-scroll-wrapper" data-scroll="5">
                <div class="mui-scroll" style="-webkit-transform: translate3d(0px, 0px, 0px) translateZ(0px);">
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell">
                            第4个选项卡子项-1
                        </li>
                        <li class="mui-table-view-cell">
                            第4个选项卡子项-2
                        </li>
                        <li class="mui-table-view-cell">
                            第4个选项卡子项-3
                        </li>
                        <li class="mui-table-view-cell">
                            第4个选项卡子项-4
                        </li>
                        <li class="mui-table-view-cell">
                            第4个选项卡子项-5
                        </li>
                        <li class="mui-table-view-cell">
                            第4个选项卡子项-6
                        </li>
                    </ul>
                    <div class="mui-pull-bottom-tips">
                        <div class="mui-pull-bottom-wrapper"><span class="mui-pull-loading">上拉显示更多</span></div>
                    </div>
                </div>
                <div class="mui-scrollbar mui-scrollbar-vertical">
                    <div class="mui-scrollbar-indicator"
                         style="-webkit-transition: 0ms; transition: 0ms; display: block; height: 390px; -webkit-transform: translate3d(0px, 0px, 0px) translateZ(0px);"></div>
                </div>
            </div>
        </div>
        <div id="item5" class="mui-slider-item mui-control-content">
            <div class="mui-scroll-wrapper" data-scroll="6">
                <div class="mui-scroll" style="-webkit-transform: translate3d(0px, 0px, 0px) translateZ(0px);">
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell">
                            第5个选项卡子项-1
                        </li>
                        <li class="mui-table-view-cell">
                            第5个选项卡子项-2
                        </li>
                        <li class="mui-table-view-cell">
                            第5个选项卡子项-3
                        </li>
                        <li class="mui-table-view-cell">
                            第5个选项卡子项-4
                        </li>
                    </ul>
                    <div class="mui-pull-bottom-tips">
                        <div class="mui-pull-bottom-wrapper"><span class="mui-pull-loading">上拉显示更多</span></div>
                    </div>
                </div>
                <div class="mui-scrollbar mui-scrollbar-vertical">
                    <div class="mui-scrollbar-indicator"
                         style="-webkit-transition: 0ms; transition: 0ms; display: block; height: 390px; -webkit-transform: translate3d(0px, 0px, 0px) translateZ(0px);"></div>
                </div>
            </div>
        </div>
        <div id="item6" class="mui-slider-item mui-control-content">
            <div class="mui-scroll-wrapper" data-scroll="7">
                <div class="mui-scroll" style="-webkit-transform: translate3d(0px, 0px, 0px) translateZ(0px);">
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell">
                            第6个选项卡子项-1
                        </li>
                        <li class="mui-table-view-cell">
                            第6个选项卡子项-2
                        </li>
                        <li class="mui-table-view-cell">
                            第6个选项卡子项-3
                        </li>
                        <li class="mui-table-view-cell">
                            第6个选项卡子项-4
                        </li>
                        <li class="mui-table-view-cell">
                            第6个选项卡子项-5
                        </li>
                    </ul>
                    <div class="mui-pull-bottom-tips">
                        <div class="mui-pull-bottom-wrapper"><span class="mui-pull-loading">上拉显示更多</span></div>
                    </div>
                </div>
                <div class="mui-scrollbar mui-scrollbar-vertical">
                    <div class="mui-scrollbar-indicator"
                         style="-webkit-transition: 0ms; transition: 0ms; display: block; height: 390px; -webkit-transform: translate3d(0px, 0px, 0px) translateZ(0px);"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {

    })
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });

    function getGoodsListCategory() {
        var url = "{:U('/Bianm/BmIndexInte1/getGoodsListCategory')}";
        var cat_id = "{$_GET['cat_id']}";
        var act = "{$_GET['act']}";
        var cat_data = {};
        cat_data.value = cat_id;
        cat_data.ucode = '{$wx_data.ucode}';
        cat_data.usign = '{$wx_data.usign}';
        cat_data.hos_cfg = '{$wx_data.hos_cfg}';
        $.ajax({
            url: url,
            data: cat_data,
            dataType: 'json',
            method: "post",
            succss: function (res) {
                if (rst.status == 1) {
                    var list = rst.list;
                    var str = '';
                    for (vo in list) {
                        var info = list[vo];
                        str += '<a href="#" class="aui-scroll-item aui-crt" data-cat="' + info.id + '">' +
                            '<div class="aui-scroll-item-icon"></div><div class="aui-scroll-item-text">' +
                            info.title + '</div></a>';
                    }
                    $("#cat").html(str);
                    $('#cat a').each(function () {
                        if ($(this).index() != 0) {
                            $(this).removeClass('aui-crt');
                        }
                    });
                    //初始页面商品
                    $('#cat a').click(function () {
                        $('#cat a').each(function () {
                            if ($(this).hasClass('aui-crt')) {
                                $(this).removeClass('aui-crt');
                            }
                        });
                        $(this).addClass('aui-crt');
                        //已选、总价归零
                        $('#totalcountshow').html('0');
                        $('#totalpriceshow').html('0');
                    });
                }
            },
            erro: function () {

            }
        });
    }

    var html = '';
    var i = 1,
        j = 1,
        m = 6, //左侧选项卡数量+1
        n = 21; //每个选项卡列表数量+1
    for (; i < m; i++) {
        html += '<a class="mui-control-item" href="#item' + i + '">选项' + i + '</a>';
    }
    $("#segmentedControls").html(html);
    (function ($) {
        //阻尼系数
        var deceleration = mui.os.ios ? 0.003 : 0.0009;
        $.ready(function () {
            //循环初始化所有下拉刷新，上拉加载。
            $.each($('.mui-slider-group .mui-scroll'), function (index, pullRefreshEl) {

                $(pullRefreshEl).pullToRefresh({
                    up: {
                        callback: function () {
                            var self = this;
                            setTimeout(function () {
                                var ul = self.element.querySelector('.mui-table-view');
                                ul.appendChild(createFragment(ul, index, 2));
                                self.endPullUpToRefresh();
                            }, 1000);
                        }
                    }
                });
            });
            var createFragment = function (ul, index, count, reverse) {
                var length = ul.querySelectorAll('li').length;
                var fragment = document.createDocumentFragment();
                var li;
                for (var i = 0; i < count; i++) {
                    li = document.createElement('li');
                    li.className = 'mui-table-view-cell';
                    li.innerHTML = '第' + (index + 1) + '个选项卡子项-' + (length + (reverse ? (count - i) : (i + 1)));
                    fragment.appendChild(li);
                }
                return fragment;
            };
        });
    })(mui);
</script>

</body>

</html>