MUI 选项卡切换+下拉刷新动态 完整实现一例
Posted 性能、可用性、伸缩性、扩展性、安全性、可监控是网站架构最核心
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了MUI 选项卡切换+下拉刷新动态 完整实现一例相关的知识，希望对你有一定的参考价值。
前台最终呈现的代码
<!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"> <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%; } .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; } </style> </head> <body> <div class="mui-content"> <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="mui-scroll"> <a class="mui-control-item mui-active" href="#item1mobile"> 好评 </a> <a class="mui-control-item" href="#item2mobile"> 全部 </a> <a class="mui-control-item" href="#item3mobile"> 差评 </a> </div> </div> <div class="mui-slider-group"> <div id="item1mobile" class="mui-slider-item mui-control-content mui-active"> <div id="scroll1" class="mui-scroll-wrapper"> <div class="mui-scroll"> <ul class="mui-table-view"> <li class="mui-table-view-cell"> 1,很干净 </li> <li class="mui-table-view-cell"> 2,环境很好,下次还会来 </li> <li class="mui-table-view-cell"> 3,酒店真的不错，是在高档小区内，环境比较清幽，内部装饰完美，很有一种文艺风，我比较喜欢这种风格，和女朋友住了一天非常满意。 </li> <li class="mui-table-view-cell"> 4,反正就是很棒啊，特别棒啊，环境好，房间打扫的干净，房间布置很招人喜欢 </li> <li class="mui-table-view-cell"> 5,非常值得推荐的住家酒店，交通便利，干净整洁，小区环境安全，外出旅游能住的舒心便利真的很赞！ </li> <li class="mui-table-view-cell"> 6,第一次住这样的家庭式客栈，再高档的社区里，环境幽美，闹中取静，小区外围购物饮食非常方便，距离钟楼鼓楼走路十几分钟就到了，管家服务的也很到位，详细的讲解了房间及电器的使用，总是下回来，还是住这里，超赞 </li> <li class="mui-table-view-cell"> 7,第一次住这种民宿类型的酒店，酒店情况跟去哪儿网上描述的大体一致，管家人也挺好的，有什么问题都可以随时打电话或发微信给管家。酒店的装修、床、沙发、杯子等都是我喜欢的类型，就好像住在自己家一样。下次再去西安一定还选择住斑斓。总体而言真的很不错，推荐！ </li> <li class="mui-table-view-cell"> 8,没想到市中心有这么好的家庭酒店，超棒，吃喝玩乐都很方便，屋内家具和床垫很不错，有五星级的感受 </li> <li class="mui-table-view-cell"> 9,强烈推荐这家酒店，房间和图片居然没有差异啊，很漂亮也很舒服，很温馨，跟在家一样，隐秘性好，值得推荐。 </li> <li class="mui-table-view-cell"> 10,不是第一次住了，每一次都很满意，有家的感觉，很温馨。布置的也特别好，色调很喜欢。感谢管家热情的服务，真的是做到了顾客至上。舒心，满意，来高新不会选择第二家，住过才知道。 </li> </ul> </div> </div> </div> <div id="item2mobile" class="mui-slider-item mui-control-content"> <div class="mui-scroll-wrapper"> <div class="mui-scroll"> <ul class="mui-table-view"> <li class="mui-table-view-cell"> 1,很干净 </li> <li class="mui-table-view-cell"> 2,环境很好,下次还会来 </li> <li class="mui-table-view-cell"> 3,酒店真的不错，是在高档小区内，环境比较清幽，内部装饰完美，很有一种文艺风，我比较喜欢这种风格，和女朋友住了一天非常满意。 </li> <li class="mui-table-view-cell"> 4,反正就是很棒啊，特别棒啊，环境好，房间打扫的干净，房间布置很招人喜欢 </li> <li class="mui-table-view-cell"> 5,非常值得推荐的住家酒店，交通便利，干净整洁，小区环境安全，外出旅游能住的舒心便利真的很赞！ </li> <li class="mui-table-view-cell"> 6,第一次住这样的家庭式客栈，再高档的社区里，环境幽美，闹中取静，小区外围购物饮食非常方便，距离钟楼鼓楼走路十几分钟就到了，管家服务的也很到位，详细的讲解了房间及电器的使用，总是下回来，还是住这里，超赞 </li> <li class="mui-table-view-cell"> 7,第一次住这种民宿类型的酒店，酒店情况跟去哪儿网上描述的大体一致，管家人也挺好的，有什么问题都可以随时打电话或发微信给管家。酒店的装修、床、沙发、杯子等都是我喜欢的类型，就好像住在自己家一样。下次再去西安一定还选择住斑斓。总体而言真的很不错，推荐！ </li> <li class="mui-table-view-cell"> 8,没想到市中心有这么好的家庭酒店，超棒，吃喝玩乐都很方便，屋内家具和床垫很不错，有五星级的感受 </li> <li class="mui-table-view-cell"> 9,强烈推荐这家酒店，房间和图片居然没有差异啊，很漂亮也很舒服，很温馨，跟在家一样，隐秘性好，值得推荐。 </li> <li class="mui-table-view-cell"> 10,不是第一次住了，每一次都很满意，有家的感觉，很温馨。布置的也特别好，色调很喜欢。感谢管家热情的服务，真的是做到了顾客至上。舒心，满意，来高新不会选择第二家，住过才知道。 </li> </ul> </div> </div> </div> <div id="item3mobile" class="mui-slider-item mui-control-content"> <div class="mui-scroll-wrapper"> <div class="mui-scroll"> <ul class="mui-table-view"> </ul> </div> </div> </div> </div> </div> </div> <script src="/Scripts/MUI/mui.min.js"></script> <script src="/Scripts/MUI/mui.pullToRefresh.js"></script> <script src="/Scripts/MUI/mui.pullToRefresh.material.js"></script> <script> mui.init(); var pageSize=10; (function ($) { //阻尼系数 var deceleration = mui.os.ios ? 0.003 : 0.0009; $(\'.mui-scroll-wrapper\').scroll({ bounce: false, indicators: true, //是否显示滚动条 deceleration: deceleration }); var amount = 5, last = 20; levelType = 0; $.ready(function () { //循环初始化所有下拉刷新，上拉加载。 $.each(document.querySelectorAll(\'.mui-slider-group .mui-scroll\'), function (index, pullRefreshEl) { $(pullRefreshEl).pullToRefresh({ down: { callback: function () { var self = this; setTimeout(function () { var ul = self.element.querySelector(\'.mui-table-view\'); var fragment = createFragment(ul, index, 10, true); if (fragment == null) { self.endPullDownToRefresh(true); } else { ul.insertBefore(fragment, ul.firstChild); self.endPullDownToRefresh(); } }, 1000); } }, up: { callback: function () { var self = this; setTimeout(function () { var ul = self.element.querySelector(\'.mui-table-view\'); var fragment = createFragment(ul, index, 5); if (fragment==null) { self.endPullUpToRefresh(true); } else { ul.appendChild(fragment); self.endPullUpToRefresh(); } }, 1000); } } }); }); var createFragment = function (ul, index, count, reverse) { var length = ul.querySelectorAll(\'li\').length; var fragment = null; var li;以上是关于MUI 选项卡切换+下拉刷新动态 完整实现一例的主要内容，如果未能解决你的问题，请参考以下文章
Hbuilder MUI选项卡怎么样用js使其切换到指定的TAB
MUI顶部选项卡的用法(tab-top-webview-main)