TabBar圖標修改
接著上篇文章，今天的內容是TabBar圖標的修改，和頁面跳轉
MUI中雖然提供了很多圖標但是不能滿足我們所有項目需求，那這個時候需要我們自己定義圖標，我這里面推薦的是阿里巴巴圖片矢量圖http://iconfont.cn/
阿里巴巴矢量圖
可以在這里面搜索想要的圖標，例如：網易新聞第一個圖標是‘新聞’，就可以在里面搜索新聞兩個字，下面就會出現非常多的圖標供你選擇，總會有你喜歡的一張。
第一步：選擇你喜歡的圖標加入購物車里面（這里是免費的）
第二步：存儲
WeChat_1457402510.jpeg
第三步：下載到本地
下載到本地解壓之后，會將合并后的字體文件及自動生成的css全部下載
第四步：修改css
默認的CSS代碼：
@font-face {font-family: "iconfont";
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome, firefox */
url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.icon-yuedu:before { content: "\\e600"; }
.icon-wode:before { content: "\\e601"; }
.icon-huati:before { content: "\\e602"; }
.icon-shipin:before { content: "\\e603"; }
.icon-xinwen:before { content: "\\e604"; }
注意：
1：為保證和mui目錄結構統一，建議將字體文件放在fonts目錄下，這樣我們需要修改@font-face下得url屬性， src: url('../fonts/iconfont.ttf')
2：只兼容iOS和Android版本的話，我們僅需要ttf格式的字體即可，其它字體可以刪除；同時，我們也僅需保留-webkit前綴語法，-moz前綴部分可以刪除；
修改之后，代碼如下：
@font-face {font-family: "iconfont";
src: url('../fonts/iconfont.ttf') format('truetype'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.icon-yuedu:before { content: "\\e600"; }
.icon-wode:before { content: "\\e601"; }
.icon-huati:before { content: "\\e602"; }
.icon-shipin:before { content: "\\e603"; }
.icon-xinwen:before { content: "\\e604"; }
第五步：集成mui
將iconfont.css及iconfont.ttf兩個文件分別拷貝到mui工程css及fonts目錄下，
然后即可在mui中引用剛生成的字體圖標代碼如下：
引入:
<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
修改后代：
<a class="mui-tab-item mui-active">
<span class="mui-icon iconfont icon-yuedu"></span>
<span class="mui-tab-label">閱讀</span>
</a>
主要代碼：將mui默認的icon（如mui-icon-home）替換成 iconfont icon-yuedu，修改后預覽效果如下：
圖標修改完成，接下來我們來看下頁面跳轉
頁面跳轉
有的小伙伴問我數據是怎么來的，我這里是通過工具抓包過來的，如果不會呢可以看下http://www.lxweimin.com/p/ae1c6f878a63
我們第一步首先是從新聞列表點擊之后進入詳情頁面首先來分析一下接口，新聞列表接口如下，
http://c.m.163.com/nc/article/headline/T1348647853363/30-20.html?from=toutiao&passport=&devId=OPdeGFsVSojY0ILFe6009pLR%2FMsg7TLJv5TjaQQ6Hpjxd%2BaWU4dx4OOCg2vE3noj&size=20&version=5.5.3&spever=false&net=wifi&lat=&lon=&ts=1456985878&sign=oDwq9mBweKUtUuiS%2FPvB015PyTDKHSxuyuVq2076XQB48ErR02zJ6%2FKXOnxX046I&encryption=1&canal=appstore
數據結構：
{
"T1348647853363": [
{
"boardid": "news_shehui7_bbs",
"clkNum": 0,
"digest": "她覺得頭痛，眼睛脹痛后以為是疲勞，未料是青光眼發作。",
"docid": "BHK5A78O00011229",
"downTimes": 0,
"id": "BHK5A78O00011229",
"img": "http://img3.cache.netease.com/3g/2016/3/8/201603080554302b80d.jpg",
"imgsrc": "http://img3.cache.netease.com/3g/2016/3/8/201603080554302b80d.jpg",
"imgType": 0,
"interest": "A",
"lmodify": "2016-03-08 05:51:32",
"picCount": 0,
"program": "HY",
"prompt": "成功為您推薦10條新內容",
"ptime": "2016-03-08 05:49:59",
"recReason": "熱門文章（養生）",
"recType": 0,
"replyCount": 1105,
"replyid": "BHK5A78O00011229",
"source": "現代快報",
"template": "manual",
"title": "女子連看18集韓劇患病險失明",
"unlikeReason": [
"養生/1",
"標題黨/6",
"來源:現代快報/4",
"內容重復/6"
],
"upTimes": 0
},
]
}
詳情頁面接口：
http://c.m.163.com/nc/article/BHK5A78O00011229/full.html
詳情頁面的接口是要通過新聞列表數據中的id，這個時候我們需要在點擊新聞列表的時候跳轉詳情頁面，并且把ID傳過去。
這里面有幾種做法，最簡單的做法就是點擊a標簽的時候傳遞過去
以下代碼是上篇文章寫的：
//用來處理列表數據的函數
function listDataAnalyze(data){
var arrayObj = data.T1348647853363;
for(var i = 0; i<arrayObj.length;i++){
finalList = '<li class="mui-table-view-cell mui-media" id="list-cell"><a href="#javascript;"><img class="mui-media-object mui-pull-left" src='+arrayObj[i].img+'><div class="mui-media-body">'+arrayObj[i].title+'<p class="mui-ellipsis">'+arrayObj[i].digest+'</div></a></li>';
$("#tableView-List").append(finalList);
}
}
先創建一個詳情頁面detail.html
創建詳情頁面
我們要對上面的這些代碼進行稍微修改,在a標簽中點擊，并且把id傳過去
//用來處理列表數據的函數
function listDataAnalyze(data){
var arrayObj = data.T1348647853363;
for(var i = 0; i<arrayObj.length;i++){
finalList = '<li class="mui-table-view-cell mui-media" id="list-cell"><a href="detail.html?'+arrayObj[i].id+'"><img class="mui-media-object mui-pull-left" src='+arrayObj[i].img+'><div class="mui-media-body">'+arrayObj[i].title+'<p class="mui-ellipsis">'+arrayObj[i].digest+'</div></a></li>';
$("#tableView-List").append(finalList);
}
}
在detail.html詳情頁面中，首先要獲取ID，然后進行網絡請求
第一步：獲取ID
<script type="text/javascript" charset="UTF-8">
mui.init();
mui.plusReady(function(){
var url_id = plus.webview.currentWebview().getURL().split('?')[1];
})
</script>
第二步：拼接詳情頁面接口
<script type="text/javascript" charset="UTF-8">
mui.init();
mui.plusReady(function(){
var url_id = plus.webview.currentWebview().getURL().split('?')[1];
var url = 'http://c.m.163.com/nc/article/'+url_id+'/full.html';
console.log(url);
})
</script>
第三步：網絡請求，從網絡獲取數據并且解析
<script type="text/javascript" charset="UTF-8">
mui.init();
mui.plusReady(function(){
var url_id = plus.webview.currentWebview().getURL().split('?')[1];
var url = 'http://c.m.163.com/nc/article/'+url_id+'/full.html';
console.log(url);
mui.ajax(url,{
dataType:'json',
type:'get',
timeout:10000,
success:function(data){
dataAnalyze(data,url_id);
},
error:function(){
console.log("返回數據失敗");
}
})
})
//數據解析的函數
function dataAnalyze(data,url_id){
console.log(data[url_id]);
}
</script>
看詳情頁面的數據結構：
{
"BHI2PG0K00031H2L": {
"apps": [
],
"boboList": [
],
"body": "<!--IMG#0--><!--IMG#1--><p> <strong>網易娛樂3月7日報道</strong>據“關愛八卦協會”近日爆料，許久未對公眾露面的張藝謀現身北京某餐廳，探班其女兒張末新電影拍攝，而同在現場的還有該電影的女主角、及剛剛曝光新戀情的倪妮。</p><p> 網友當日爆料稱，自己是在北京某餐廳打工，前段時間正巧遇見倪妮來餐廳取景，并驚喜看到張藝謀前來探班，聽現場工作人員說該戲的導演正是張藝謀的女兒。爆料照片雖不清晰，但依然能分辨出確實是張藝謀和倪妮。</p>",
"digest": "",
"dkeys": "張藝謀",
"docid": "BHI2PG0K00031H2L",
"ec": "金舒_NK4322",
"hasNext": false,
"img": [
{
"alt": "張藝謀",
"pixel": "550*412",
"ref": "<!--IMG#0-->",
"src": "http://img5.cache.netease.com/ent/2016/3/7/20160307102654078a5.jpg"
},
{
"alt": "倪妮",
"pixel": "550*733",
"ref": "<!--IMG#1-->",
"src": "http://img2.cache.netease.com/ent/2016/3/7/201603071026525bb4e.jpg"
}
],
"keyword_search": [
{
"word": "倪妮"
},
{
"word": "張藝謀"
},
{
"word": "探班"
}
],
"link": [
],
"picnews": true,
"ptime": "2016-03-07 10:27:25",
"relative_sys": [
{
"href": "",
"id": "BG17ENH4000300B1",
"imgsrc": "http://img1.cache.netease.com/ent/2016/2/17/20160217110639e126e.png",
"ptime": "2016-02-17 11:06:08",
"source": "網易娛樂",
"title": "倪妮霍建華演張藝謀女兒處女作 未見老謀子身影",
"type": "doc"
},
{
"href": "",
"id": "BEO0QE2U9001QE2V",
"imgsrc": "http://easyread.ph.126.net/kmj1_0qBmDqrvzaQrRHYiw==/7916499113153184879.jpg",
"ptime": "2016-02-01 09:59:31",
"source": "粉絲網",
"title": "“謀女郎”首證傳承 倪妮接演28歲未成年",
"type": "doc"
},
{
"href": "",
"id": "BHH4MDM99001MDMA",
"imgsrc": "http://easyread.ph.126.net/_8C5XqGQ0eGvK50mlulTuw==/7916603566757890979.jpg",
"ptime": "2016-03-07 00:31:00",
"source": "新民網",
"title": "曝倪妮井柏然同居 兩人曾合作電影《等風來》",
"type": "doc"
}
],
"replyBoard": "ent2_bbs",
"replyCount": 227,
"source": "網易娛樂",
"template": "normal1",
"threadAgainst": 0,
"threadVote": 1,
"tid": "",
"title": "張藝謀現身片場探班女兒新作",
"topiclist": [
{
"alias": "尖峰娛論、八卦聚焦",
"cid": "C1378977941637",
"ename": "mingxing",
"hasCover": false,
"subnum": "超過1000萬",
"tid": "T1348648624173",
"tname": "網易明星"
},
{
"alias": "每日給你推薦好看的電影",
"cid": "C1378977941637",
"ename": "dianyingtuijian",
"hasCover": false,
"subnum": "57.4萬",
"tid": "T1401265158369",
"tname": "網易電影"
}
],
"topiclist_news": [
{
"alias": "MOVIE",
"cid": "C1348648351901",
"ename": "dianying",
"hasCover": false,
"subnum": "258萬",
"tid": "T1348648650048",
"tname": "影視"
},
{
"alias": "Entertainment",
"cid": "C1348648351901",
"ename": "yule",
"hasCover": false,
"subnum": "超過1000萬",
"tid": "T1348648517839",
"tname": "娛樂"
}
],
"users": [
],
"voicecomment": "off",
"votes": [
],
"ydbaike": [
]
}
}
為了方便大家查看代碼，我這里面不會寫復雜的代碼布局，在這里就做簡單的布局進行展示，在這里面要注意的就是數據中有一個字段body它里面的標簽是后臺直接寫好返回過來的，所以說你只需要動態插入到對應的容器（ <div class="mui-content" id="container">
</div>）里面就可以了。
HTML代碼
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<span id="replyCount">0跟帖</span>
</header>
<div class="mui-content" id="container">
</div>
</body>
在數據解析中動態添加的標簽和內容
//數據解析
function dataAnalyze(data,url_id){
//跟帖數量
console.log(data[url_id].replyCount);
$("#replyCount").html(data[url_id].replyCount+"跟帖");
//抬頭
$("#container").append('<h3>'+data[url_id].title+'</h3>');
//新聞事件data[url_id].ptime
$("#container").append('<span id="ptime">'+data[url_id].ptime+'</span>');
//圖片，判斷是否有圖片，有的話就添加
if(data[url_id].img.length != 0)
{
var arr = data[url_id].img;
for(var i = 0;i<arr.length;i++){
$("#container").append('<img src="'+data[url_id].img[i].src+'" alt="'+data[url_id].img[0].alt+'" />');
}
}
//主題內容
$("#container").append(data[url_id].body);
}
設置CSS樣式
<style type="text/css">
#replyCount{
background-color: red;
color: white;
border-radius: 15px;
margin-top:10px;
padding: 5px;
float: right;
margin-right: 10px;
}
.mui-content{
top: 45px;
bottom: 0px;
}
body,#container,.mui-bar{
background-color: white;
}
#container p{
padding: 0 10px;
font-size: 14px;
}
#container img{
width: 90%;
display: block;
margin: 15px auto;
}
#container h3{
margin: 10px 0px 10px 10px;;
}
#ptime{
margin: 10px 10px;
}
</style>
效果如下：
效果
