Hbuilder + MUI 的簡單案例
話很少說 直接上代碼javascript
項目結構：css
index.html 的代碼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" />
<title>MUI示例</title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.init({
preloadPages: [{
url: 'topNews.html',
id: 'topNews'
},
{
url: 'detailNews.html',
id: 'datailNews'
}
],
preloadLimt: 5
});
</script>
<style>
/* 統一 輪播 圖片的大小 */
.mui-slider-item > a > img{
width: 240px;
height: 240px;
}
</style>
</head>
<body>
<!-- 主界面菜單同時移動 -->
<!-- 側滑導航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable">
<!-- 主頁面容器 -->
<div class="mui-inner-wrap">
<!-- 菜單容器 -->
<aside class="mui-off-canvas-left" style="background: #FAFAFA;" id="offCanvasSide">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 菜單具體展現內容 -->
<!-- 頭像 start -->
<div class="mui-card">
<!--內容區-->
<div class="mui-card-content">
<img width="240px" height="240px" src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=21f8a31ac9fc1e17fdbf8b3772ab913e/d4628535e5dde711f2be57faa1efce1b9d166149.jpg"
alt="">
</div>
</div>
<!-- 頭像 end -->
</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 href="index.html" class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首頁</span>
</a>
<a href="./page/two.html" 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 class="mui-input-row mui-search">
<input type="search" class="mui-input-clear" placeholder="請輸入您要搜索的內容...">
</div>
<!-- 搜索欄 end -->
<!-- 圖片輪播 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 -->
<p style="margin:5px 0 5px 5px">
今日熱詞...
</p>
<!-- 圖文列表 start -->
<ul class="mui-table-view" id="list_host_content">
</ul>
<!-- 圖文列表 end -->
</div>
</div>
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
<script type="text/javascript">
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；
});
});
},
host: function(number) {
mui.ajax('https://news-at.zhihu.com/api/3/news/hot', {
dataType: 'json', //服務器返回json格式數據
type: 'get', //HTTP請求類型
timeout: 10000, //超時時間設置爲10秒；
headers: {
'Content-Type': 'application/json'
},
success: function(data) {
console.log("我加載了 "+ number + " 次");
// 若是沒有數據,禁止上拉功能
if( data == "" ){
mui("#refreshContainer").pullRefresh().endPullupToRefresh(true);
}else{
mui("#refreshContainer").pullRefresh().endPullupToRefresh(false);
}
//服務器返回響應，根據響應結果，分析是否登陸成功；
let html = '';
mui.each(data.recent, 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.news_id + '" >\n' +
'\t\t\t\t\t\t\t\t\t<img class="mui-media-object mui-pull-right" src="' + obj.thumbnail + '">\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;
//ajax.mui_scroll();
},
error: function(xhr, type, errorThrown) {
//異常處理；
console.log(type);
}
});
},
mui_scroll: function() {
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0004 //flick 減速係數，係數越大，滾動速度越慢，滾動距離越小，默認值0.0006
});
},
jump: function() {
//控制 a 跳轉
mui('body').on('tap', 'a', function(e) {
document.location.href = this.href;
});
},
refresh() {
mui("#refreshContainer").pullRefresh({
up: {
height: 50, //可選.默認50.觸發上拉加載拖動距離
auto: true, //可選,默認false.自動上拉加載一次
contentrefresh: "正在加載...", //可選，正在加載狀態時，上拉加載控件上顯示的標題內容
contentnomore: '沒有更多數據了', //可選，請求完畢若沒有更多數據時顯示的提醒內容；
callback: function() { //必選，刷新函數，根據具體業務來編寫，好比經過ajax從服務器獲取新數據；
console.log("往上拉");
//異步執行
setTimeout(function() {
ajax.host(number);
number++;
}, 200)
}
}
});
},
start: function() {
ajax.title_img();
ajax.refresh();
ajax.jump();
},
connect: function() { //判斷網絡
mui.plusReady(function() {
// plus.networkinfo.CONNECTION_UNKNOW = "未知";狀態碼：0
// plus.networkinfo.CONNECTION_NONE = "無網絡連接"; 狀態碼：1
// plus.networkinfo.CONNECTION_ETHERNET = "有線網絡"; 狀態碼：2
// plus.networkinfo.CONNECTION_WIFI = "無線網絡"; 狀態碼：3
// plus.networkinfo.CONNECTION_CELL2G = "蜂窩移動2G網絡"; 狀態碼：4
// plus.networkinfo.CONNECTION_CELL3G = "蜂窩移動3G網絡"; 狀態碼：5
// plus.networkinfo.CONNECTION_CELL4G = "蜂窩移動4G網絡"; 狀態碼：6
if (plus.networkinfo.getCurrentType() != 1 && plus.networkinfo.getCurrentType() != 3) {
//mui.toast('正在使用蜂窩移動網絡');
ajax.start();
} else if (plus.networkinfo.getCurrentType() == 3) {
//mui.toast('正在使用WIFI......');
ajax.start();
} else {
mui.toast("當前無網絡連接......");
//兩秒後關閉頁面
setTimeout(function() {
mui.currentWebview.close();
}, 2000);
}
//獲取手機位置(經緯度)
// plus.geolocation.getCurrentPosition(function(p){
// mui.toast('緯度：'+ p.coords.altitude +'經度：'+ p.coords.longitude);
// },function(e){
// mui.toast('Geolocation error ：' + e.message);
// });
//獲取本地相冊
// void plus.gallery.pick(function(){
// alert(11);
// });
//蜂鳴聲
//void plus.device.beep(5);
//振動
//void plus.device.vibrate( 3000 );
//關閉 原生等待框
//plus.nativeUI.closeWaiting();
});
}
};
ajax.connect();
</script>
</body>
</html>
案例 效果圖：java
其餘功能 待完善...........git
相關文章
- 1. HBuilder --- MUI , HTML5
- 2. hbuilder案例-仿微信界面
- 3. h5(HBuilder+mui)開發App
- 4. HBuilder mui 手勢事件
- 5. Hbuilder，Mui等使用總結
- 6. HBuilder mui視頻類app
- 7. log4j簡單案例
- 8. jQuery 簡單案例
- 9. hadoop——簡單案例
- 10. Varnish簡單案例
- 更多相關文章...
- • PHP 完整表單實例 - PHP教程
- • Thymeleaf簡單格式化輸出 - Thymeleaf 教程
- • 常用的分佈式事務解決方案
- • Github 簡明教程
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. HBuilder --- MUI , HTML5
- 2. hbuilder案例-仿微信界面
- 3. h5(HBuilder+mui)開發App
- 4. HBuilder mui 手勢事件
- 5. Hbuilder，Mui等使用總結
- 6. HBuilder mui視頻類app
- 7. log4j簡單案例
- 8. jQuery 簡單案例
- 9. hadoop——簡單案例
- 10. Varnish簡單案例