話不多說，直接上代碼與效果圖吧。
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="../css/mui.css" rel="stylesheet" /> <style> /* 統一 輪播 圖片的大小 */ .mui-slider-item > a > img{ width: 240px; height: 240px; } </style> </head> <body> <script src="../js/mui.js"></script> <script type="text/javascript"> mui.init() </script> <!-- 主界面菜單同時移動 --> <!-- 側滑導航根容器 --> <div class="mui-off-canvas-wrap mui-draggable"> <!-- 主頁面容器 --> <div class="mui-inner-wrap"> <!-- 菜單容器 --> <aside class="mui-off-canvas-left" id="offCanvasSide"> <div class="mui-scroll-wrapper"> <div class="mui-scroll"> <!-- 菜單具體展示內容 --> </div> </div> </aside> <!-- 主頁面標題 --> <header class="mui-bar mui-bar-nav"> <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a> <h1 class="mui-title">標題</h1> </header> <nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item mui-active"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首頁</span> </a> <a class="mui-tab-item"> <span class="mui-icon mui-icon-phone"></span> <span class="mui-tab-label">電話</span> </a> <a class="mui-tab-item"> <span class="mui-icon mui-icon-email"></span> <span class="mui-tab-label">郵件</span> </a> <a class="mui-tab-item"> <span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label">設置</span> </a> </nav> <!-- 主頁面內容容器 --> <div id="refreshContainer" class="mui-content mui-scroll-wrapper"> <div class="mui-scroll"> <!-- 主界面具體展示內容 --> <!-- 圖片輪播 start --> <div id="slider" class="mui-slider"> <div class="mui-slider-group mui-slider-loop" id="top_img"> </div> <div class="mui-slider-indicator" id="top_point"> </div> </div> <!-- 圖片輪播 end --> <!-- 圖文列表 start --> <ul class="mui-table-view" id="list_host_content"> </ul> <!-- 圖文列表 end --> </div> </div> <div class="mui-off-canvas-backdrop"></div> </div> </div> <script> // var number = 0; var ajax = { title_img: function() { mui.get('https://news-at.zhihu.com/api/4/news/latest', function(data) { // 圖片 var html = ''; // 循環點 var loop_point = ''; //跟隨圖片的點數 var point_number = ''; loop_point += '\t\t\t\t\t\t\t\t<div class="mui-slider-item mui-slider-item-duplicate">\n' + '\t\t\t\t\t\t\t\t\t<a href="#">\n' + '\t\t\t\t\t\t\t\t\t\t<img src="' + data.top_stories[0].image + '">\n' + '\t\t\t\t\t\t\t\t\t</a>\n' + '\t\t\t\t\t\t\t\t</div>'; html += loop_point; mui.each(data.top_stories, function(index, obj) { // 圖片 html += '\t\t\t\t\t\t\t\t<div class="mui-slider-item">\n' + '\t\t\t\t\t\t\t\t\t<a href="topNews.html?id=' + obj.id + '">\n' + '\t\t\t\t\t\t\t\t\t\t<img src="' + obj.image + '">\n' + '\t\t\t\t\t\t\t\t\t</a>\n' + '\t\t\t\t\t\t\t\t</div>'; if (index == 0) { point_number += '<div class="mui-indicator mui-active"></div>'; } else { point_number += '<div class="mui-indicator"></div>'; } }); html += loop_point; // 追加內容 var mui_top_img = mui('#top_img'); var top_img = mui_top_img[0]; top_img.innerHTML = html; var mui_top_point = mui('#top_point'); var top_point = mui_top_point[0]; top_point.innerHTML = point_number; //獲得slider插件對象 var gallery = mui('.mui-slider'); gallery.slider({ interval: 2000 //自動輪播周期，若為0則不自動播放，默認為0； }); }); }, refresh: function() { // 上拉下拉刷新組件 mui('#refreshContainer').pullRefresh({ up: { height: 50, //可選.默認50.觸發上拉加載拖動距離 auto: true, //可選,默認false.自動上拉加載一次 contentrefresh: "正在加載...", //可選，正在加載狀態時，上拉加載控件上顯示的標題內容 contentnomore: '沒有更多數據了', //可選，請求完畢若沒有更多數據時顯示的提醒內容； callback: function() { //必選，刷新函數，根據具體業務來編寫，比如通過ajax從服務器獲取新數據； console.log("往上拉"); //異步執行 setTimeout(function() { ajax.info(number); number ++; }, 200) } }, down: { style: 'circle', //必選，下拉刷新樣式，目前支持原生5+ ‘circle’ 樣式 color: '#2BD009', //可選，默認“#2BD009” 下拉刷新控件顏色 height: '50px', //可選,默認50px.下拉刷新控件的高度, range: '100px', //可選 默認100px,控件可下拉拖拽的范圍 offset: '0px', //可選 默認0px,下拉刷新控件的起始位置 auto: false, //可選,默認false.首次加載自動上拉刷新一次 callback: function() { //必選，刷新函數，根據具體業務來編寫，比如通過ajax從服務器獲取新數據； console.log("往下拉"); } } }); }, info: function(number) { // let date = new Date(); // let year = date.getFullYear(); // let month = date.getMonth() + 1; // let day = date.getDate(); // // let date1 = year + "" + month + "" + day; // let info_date = date1 - number; let date = 20131119; let info_date = 20131119 - number; mui.get('https://news-at.zhihu.com/api/4/news/before/' + info_date, function(data) { // 如果沒有數據 禁用上拉加載 if( date == "" ){ mui("#refreshContainer").pullRefresh().endPullupToRefresh(true); }else{ mui("#refreshContainer").pullRefresh().endPullupToRefresh(false); } let html = ''; mui.each(data.stories, function(index, obj) { html += '\t\t\t\t\t\t\t<li class="mui-table-view-cell mui-media">\n' + '\t\t\t\t\t\t\t\t<a href="detailNews.html?id=' + obj.id + '" >\n' + '\t\t\t\t\t\t\t\t\t<img class="mui-media-object mui-pull-right" src="' + obj.images[0] + '">\n' + '\t\t\t\t\t\t\t\t\t<div class="mui-media-body">\n' + '\t\t\t\t\t\t\t\t\t\t<p class="mui-ellipsis">' + obj.title + '</p>\n' + '\t\t\t\t\t\t\t\t\t</div>\n' + '\t\t\t\t\t\t\t\t</a>\n' + '\t\t\t\t\t\t\t</li>'; }); let mui_content = mui('#list_host_content'); let content = mui_content[0]; content.innerHTML += html; }); }, start: function() { ajax.title_img(); } }; ajax.start(); ajax.refresh(); </script> </body> </html>
效果
