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

最新推荐文章于 2021-03-10 17:21:00 发布
最新推荐文章于 2021-03-10 17:21:00 发布
阅读量1.8k 收藏 6
点赞数 1
分类专栏： js效果 文章标签： 左侧tab 上拉刷新
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a6749920/article/details/83625360
版权

效果图：

代码：

<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>

 

苦逼的全栈工程师
关注
专栏目录
MUI实现侧方选项卡功能
浪子四方
08-29 1022
引言 对于线上行业而言，分类栏目可以帮助我们快速找到所需要的商品或文章等。而现在实现这种分类效果的大多数以侧方选项卡的形式来实现，所以掌握该技能可以大大的提高平时的开发效率。 实现效果 案例源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit...
mui -- 选项卡切换+上拉加载
qq_38013145的博客
10-09 2820
推荐 热点 北京 第1个选项卡子项-1 第1个选项卡子项-2 第1个选项卡子项-3 第1个选项卡子项-4 第1个选项卡子项-5 第2个选项卡子项-1 第2个选项卡子项-2 第2个选项卡子项-3 第2个选项卡子项-4 第2
mui-选项卡+上拉加载更多
weixin_38304202的博客
06-10 925
有空时来补充
mui上拉加载+选项卡+ajax
12-25
因最近开发h5用的前端框架是mui,教程和demo大部分没有动态数据，在网上也没有很好的办法，自己研究弄了一个小demo。
MUI选项卡下拉刷新上拉加载demo
12-10
这是一个基于mui框架下实现的一个上拉刷新，下拉加载的一个数据加载demo这样的做法是为了提高用户的体验感，减少服务器的压力~
mui上拉加载前端和PHP后端,mui:选项卡切换+上拉加载+ajax
weixin_33501587的博客
03-10 177
因最近开发h5用的前端框架是mui,教程和demo大部分没有动态数据，在网上也没有很好的办法，比较喜欢简单粗暴就直接上代码了。1.mui:选项卡切换+上拉加载+ajax1.1关于mui的选项卡切换的样式，mui的官网上有，在这就不多说了 1.2 直接上代码Hello MUI选项卡切换+上拉加载1.3 做重点描述(1)mui的html的结构以及里的class要按照我上面的写法来写，要不然部分内容不...
选项卡侧边出现
qq_41170620的博客
01-16 550
选项卡侧边出现 下拉菜单 点击下拉菜单 1 1 2 3 4 2 11 22 33 44 3 111 222 333 444 4 1111 2222 3333 ...
Mui-APP:Mui + H5 Plus + HBuilder开发《微定位》APP
05-09
这是我的毕业设计，使用H5 Runtime + Mui + HBuilder结合开发，混合开发得APP（微定位)。 核心功能 多人定位、导航； 与好友聊天、群聊、添加好友、添加群； 登陆注册，支持第三方登陆（QQ、微信、微博）； 技术实现...
mui:选项卡切换+上拉加载+ajax
foxqi的博客
09-30 1万+
因最近开发h5用的前端框架是mui,教程和demo大部分没有动态数据，在网上也没有很好的办法，比较喜欢简单粗暴就直接上代码了。 1.mui:选项卡切换+下拉加载+ajax 1.1关于mui的选项卡切换的样式，mui的官网上有，在这就不多说了 1.2 直接上代码 &amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;html&a
mui多层tab切换上拉加载的实现
weixin_41966546的博客
11-14 525
思路： 1、可以共用一个滚动下拉外壳 mui-scroll-wrapper 2、当下拉时判断当前被选中的是哪个tab ，从而渲染那个tab 步骤： 1.首先，引入mui框架的依赖，mui.css和mui.js,模板渲染插件art-template.js <link rel="stylesheet" href="dist/mui/css/mui.css"> //mui 样式文件 &l...
左侧菜单切换右侧选项卡.rar
05-21
c#左侧抽屉式菜单切换右侧选项卡，选项卡头部可隐藏，抽屉式菜单可想象QQ好友菜单，类似，通过点击菜单切换右侧选项卡
jQuery 左侧选项卡菜单点击切换代码.zip
07-11
$(document).ready(function(){ function myfunction(li,li_a,menu_tab){ li.click(function(){ var index=$(this).index(); menu_tab.eq(index).addClass("active").siblings().removeClass("active"); li_a.removeClass("selected"); li_a.eq(index).addClass("selected").siblings().removeClass("selected"); }); } myfunction($(".container .menu .ulmenu1 li"),$(".container .ulmenu1 li a"),$(".container .content .menu1 .tab")); myfunction($(".container .menu .ulmenu2 li"),$(".container .ulmenu2 li a"),$(".container .content .menu2 .tab")); myfunction($(".container .menu .ulmenu3 li"),$(".container .ulmenu3 li a"),$(".container .content .menu3 .tab")); $(function(){            //ul/li的折叠效果 $(".menu > ul").eq(0).show(); $(".menu h3").click(function(){ //找menu对应的tab $(".menu_tab > div").removeClass("active"); var val=($(this).next().attr('class')); var menu_value=(val.substring(val.length-1)); $(".container .content .menu" menu_value " .tab:first-child").addClass("active"); $(".container .menu .ulmenu" menu_value " li>a").removeClass("selected"); $(".container .menu .ulmenu" menu_value " li a").eq(0).addClass("selected");//默认设置为被选中状态            $(this).next().stop().slideToggle();            $(this).siblings().next("ul").stop().slideUp();            }); }); 这是一款jQuery 左侧选项卡菜单点击切换代码，点击左侧选项卡可进行菜单切换。
mui 左侧选项卡-div模式 的选项卡切换监听
weixin_30267691的博客
09-04 715
使用$('#segmentedControls').on('change', '.mui-control-item', function () { }）和document.getElementById("segmentedControls").addEventListener('.mui-control-item', function (e) {}） 都没有效果 后来使用que...
vue cli 关于mui左侧菜单栏问题
weixin_43893437的博客
03-16 830
将mui组件的js引入以后发现菜单的点击联动失效 (function() { var controlsElem = document.getElementById("segmentedControls"); var contentsElem = document.getElementById("segmentedControlContents"); var controlL...
HBuilder mui入门教程——（2）含tab选项卡的首页
热门推荐
永远行进
07-02 3万+
在上一篇文章中简单介绍了mui框架，并创建了第一个mui项目。在APP中，底部的选项卡菜单一般是各个APP都有的，在mui中怎样创建呢，下面就简单说下。极速创建【文件】->【新建】->【HTML文件】，然后在弹出窗口下面的“选择模板组：”中选中“mui底部选项卡（Webview模式）”。点击完成，就会自动创建一个带有默认页面的模板。 打开tab-webview-main.html可以在右侧看到
MUI-首页tab选项卡切换功能
dududu01的专栏
09-25 2万+
测试subpage html, body { background-color: #efeff4; } 库存 库存 个人中心 设置 //mui初始化 mui.init({ swipeBack: false }); var menu = null, m
vue3+springboot高校学生评教系统[编号：CS_82037](1)源码数据库.zip
最新发布
09-23
本文介绍了使用SpringBoot作为后端框架，Vue作为前端框架，MyBatis-Plus进行持久层开 。详细描述了系统测试的目的、功能测试案例，包括登录验证和用户管理，以及数据库设计。 前端：vue3 开发工具：IDEA 或者eclipse都支持 编程语言: java 框架：springboot/ssm都支持 jdk版本:jdk1.8以上均可 数据库: mysql 版本不限 数据库工具：Navicat/SQLyog都可以
MUI上拉加载与下拉刷新实现教程
"MUI实现上拉加载和下拉刷新效果" 在移动应用开发中，上拉加载和下拉刷新是常见的交互设计，用于提供更好的用户体验，让用户能够方便地查看更多的内容或者更新信息。MUI（Mobil UI）是一个基于HTML5的开源前端框架...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值