WEBAPP开发之旅行webapp开发案例-职坐标

WEBAPP开发之旅行webapp开发案例

白羽 2018-07-19 来源：网络阅读 1125 评论 0

摘要：本文将带你了解WEBAPP开发之旅行webapp开发案例，希望本文对大家学WebApp有所帮助。

使用H5开发的手机端旅行app，提供目的地(国内、国外、周边)搜索、旅游攻略查询、游记分享、私人定制4大模块，类似携程、同程、去哪儿、马蜂窝h5移动端。
页面采用750px设计稿使用rem响应式配合fontsize.js，模拟了滚动到底部加载更多。里面行程树节点布局很不错、界面简洁、UI精美。还用到了一个自己开发的xwpop.js弹窗插件。
滚动到底部加载更多
//加载更多函数
varpage=0;
varisLoading=false;
varisOver=false;

functionloadMore(obj){
if(!isLoading&&!isOver){
varscrollTop=$(obj).scrollTop();
varscrollHeight=$(document).height();
varwindowHeight=$(obj).height();

if(scrollTop+windowHeight+50>=scrollHeight){
$(".J__loadMore").fadeIn();
isLoading=true;

varresult="";
for(vari=0;i<2;i++){
//模拟加载数据
result+=[
'

\
\
\
\
清迈小清新酒店|第一眼就爱上你\
想跟复古蓝墙白孔雀合影？想在阳光醉人的午后眯上双眼尽情撸猫？

28635人浏览攻略\
\
\
'
].join('');
}

setTimeout(function(){
$(".J__loadMore").hide();

$("#J__gongLvList").append(result);
page+=1;
isLoading=false;
//最后一页(模拟2页)
if(page==2){
isOver=true;
$(".J__loadMore").fadeIn().text("没有更多了~");
}
},1000);
}
}
}
//滚动加载
$(window).scroll(function(){
loadMore($(this));
});

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！

app排行软件手机应用开发公司 app软件编辑

本文由 @白羽发布于职坐标。未经许可，禁止转载。