收藏

下载资源 加入VIP,免费下载

第1页 / 共79页

第2页 / 共79页

第3页 / 共79页

第4页 / 共79页

第5页 / 共79页

css增加

4

#topSearch{width:

60%;height:

30px;background:

#F6F5F4;border-radius:

3px;float:

right;margin:

7px8px0px0px;line-height:

30px;color:

#999999;text-align:

left;text-indent:

15px;font-size:

14px;}

制作分类导航

dom及js

hui（'#topCate'）.scrollX（8,'a'）;

5

//完善点击效果

functionchangeCate（cateId）{

hui（'#topCate'）.find（'a'）.removeClass（'topCateSed'）.eq（cateId）.ad

dClass（'topCateSed'）;

}

使用了hui的横向滚动、使用hui选择器进行连贯操作完成点击效果、

css部分

#topCate{height:

40px;background:

#F6F5F4;border-bottom:

1pxsolid#E8

E8E8;width:

100%;}

#topCatea{display:

block;float:

left;height:

40px;line-height:

40px;width:

15%;text-align:

center;}

.topCateSed{color:

#D43D3D;font-size:

17px!

important;}

6

制作子窗口、数据加载、下拉刷新

为了实现app的上拉刷新和下拉加载我们需要在入口页面嵌入子窗口。

相关知识：

webview，参考手册：

http:

//www.html5plus.org/doc/zh_cn/webvi

ew.html

实现步骤：

1、创建子窗口indexSub.html

2、在入口页嵌入子窗口（会使用plusReady事件）

3、将子页面的返回功能转交给入口页

入口页代码

DOCTYPEhtml>

user-scalable=no"/>

7

="color:

#999999;">

搜您想搜的

hui.plusReady（function（）{

varsubView=hui.create（'indexSub.html',{'top':

'87px'

，bottom:

'0

px'}）;//

此处注意设置

bottom

varself=plus.webview.currentWebview（）;

self.append（subView）;

}）;

8

hui（'#topCate'）.scrollX（8,'a'）;

//完善点击效果

functionchangeCate（cateId）{

hui（'#topCate'）.find（'a'）.removeClass（'topCateSed'）.eq（cateId）.ad

dClass（'topCateSed'）;

}

子窗口代码

DOCTYPEhtml>

hi....

9

hui.Back=function（）{

varparentView=plus.webview.currentWebview（）.parent（）;

parentView.evalJS（'hui.Back（）;'）;

}

HOA介绍

HCoderOpenApi简称HOA是由提供的一套api数据源，提

供了日常app开发学习过程中常用的数据源，适用于基于muihuih5+的app

开发。

开放源地址:

项目实现过程

入口页js变化

varsubView;

hui.plusReady（function（）{

subView=hui.create（'indexSub.html',{'top':

'88px',bottom:

'0px

'}）;

varself=plus.webview.currentWebview（）;

10

self.append（subView）;

}）;

hui（'#topCate'）.scrollX（8,'a'）;

//完善点击效果

functionchangeCate（cateId）{

hui（'#topCate'）.find（'a'）.removeClass（'topCateSed'）.eq（cateId）.ad

dClass（'topCateSed'）;

subView.evalJS（'changeCate（'+cateId+'）;'）;

}

子页面完整代码

DOCTYPEhtml>

11

varpage=1,cate=0;

hui.plusReady（function（）{

changeCate（0）;

hui.refresh（getNews）;

}）;

hui.Back=function（）{

varparentView=plus.webview.currentWebview（）.parent（）;

parentView.evalJS（'hui.Back（）;'）;

}

functionchangeCate（cateId）{cate=cateId;getNews（）;}

functiongetNews（）{

varhtml='';

hui.centerLoading（）;

hui.get（

'

aList&page='+page+'&cate='+cate,

function（data）{

vararrNews=data.split（'--hcSplitor--'）;

for（vari=0;i

varitemArr=arrNews[i].split（'--hcListSplitor--'）;

',{},true,{id:

\''+itemArr[0]+'\'}）;">'+

12

''+

''+

'

'+itemArr[2]+'

''+

'';

}

hui（'#newsList'）.html（'

'+html+'

hui.centerLoading（true）;

hui.endRefresh（）;

},

function（e）{

hui.toast（'获取新闻失败，请检查网络'）;hui.centerLoading（true）;

hui.endRefresh（）;

}

）;

}

13

新闻分类切换、上拉加载更多

本节内容

1、点击新闻分类切换不同的新闻列表。

2、上拉加载更多

核心js

functionchangeCate（cateId）{

page=1;

cate=cateId;

hui.scrollTop（0）;

hui.isLoadMoreIng=false;

getNewsList（）;

}

functiongetNewsList（）{

page=1;

hui.centerLoading（）;

varhtml='';

hui.get（

'

aList&page='+page+'&cate='+cate,

function（data）{

hui.endRefresh（）;

vararrItem=data.split（'--hcSplitor--'）;

14

for（vari=0;i

varitem=arrItem[i].split（'--hcListSplitor--'）;

html+='

}

hui.centerLoading（true）;

hui（'#newsList'）.html（'

'+html+'

hui.lazyLoadNow（）;

page++;

},

function（e）{

hui.endRefresh（）;

hui.toast（'连接失败'）;

hui.centerLoading（true）;

}

）;

15

}

16

懒加载的使用

使用HUI来实现图片的懒加载是非常方便的，您只需要设置图片的预加载占位图

及实际地址：

//js

hui.lazyLoad（className）与hui.lazyLoadNow（className）

hui.lazyLoad（）的参数为需要懒加载的图片的类属性，默认为HUI_Lazy。

懒加载组件会自动识别滚动条滚动事件，如果