书签 分享 收藏 举报 版权申诉 / 79
立即下载 加入VIP,免费下载
当前位置： 首页 > 农林牧渔 > 林学 > 今日头条APP案例开发.docx

类型今日头条APP案例开发.docx

  • 文档编号：26299828
  • 上传时间：2023-06-17
  • 格式：DOCX
  • 页数：79
  • 大小：45.61KB

 

="color:

#999999;">搜您想搜的

 

 

 

 

 

 

 

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

 

 

 

changeCate（0）;"class="topCateSed">推荐

 

changeCate

（1）;">热点

 

changeCate

（2）;">视频

 

changeCate（3）;">本地

 

changeCate（4）;">社会

 

changeCate（5）;">娱乐

 

changeCate（6）;">问答

 

changeCate（7）;">汽车

 

changeCate（8）;">体育

 

 

 

 

 

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;">

搜您想搜的

changeCate（0）;"class="topCateSed">

推荐

changeCate

（1）;">

热点

changeCate

（2）;">

视频

changeCate（3）;">

本地

changeCate（4）;">

社会

changeCate（5）;">

娱乐

changeCate（6）;">

问答

changeCate（7）;">

汽车

changeCate（8）;">

体育

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（'

'）;

 

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.open（\'info.html\',{},true,

    {newsId:

    '+item[0]+'}）;">'+

     

    ''+

    ''+

     

    '

    '+item[2]+'

    '+

     

    ''+

     

    ''+

     

    '

    • ';

     

    }

     

    hui.centerLoading（true）;

     

    hui（'#newsList'）.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。

     

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

    举报
    举报     版权申诉
    版权申诉     word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载
    配套讲稿：

    如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

    特殊限制：

    部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

    关 键  词：
    今日 APP 案例 开发
    提示  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
    关于本文
    本文标题：今日头条APP案例开发.docx
    链接地址：https://www.bdocx.com/doc/26299828.html

    热门标签

    关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

    copyright@ 2008-2022 冰点文档网站版权所有

    经营许可证编号:鄂ICP备2022015515号-1

    收起
    在线客服
    意见反馈
    返回顶部
    展开
    QQ交谈
    返回顶部