用$.getJSON() 和$.post()获取第三方数据做页面 ——惠品折页面(1)
用$.getJSON() 和$.post()获取第三方数据做页面
首页 index.html 页面
需要jquery 和 template-web js文件 可以直接在官网下载
中间导航条的固定
可以在导航添加一个动态class值 class值 的css样式 position :fixed ;
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><link rel="stylesheet" href="index.css"><title>惠品折首页</title> </head> <body><header><div id="top"><img src="http://m.huipinzhe.com/static/img/logo.jpg" alt="logo"><input type="text"><a href="category.html" target="_self"><img src="./images/menu.png" alt="search"></a></div> </header><img id="banner" src="http://huipinzhe-img-03.b0.upaiyun.com/banner1009/梁荷750.png" alt=""><img id="banner1" src="./images/banner.png" alt=""><div id="mainMenuBarAnchor"></div><div id="mainMenuBar"><ul id="ul"></ul></div><div id="bottom"><a href="index.html"><img src="data:images/home.png" alt=""></a><a href="specialList.html"><img src="data:images/juan.png" alt=""></a><a href="find.html"><img src="data:images/miao.png" alt=""></a><a><img src="data:images/my.png" alt=""> </a></div> <section id="container"><section><script id="goods" type="text/html">{{each rows good }}{{if good.itemType=="TIANMAO"}}<div class="good"><img src=" {{good.image}}"><div><p><span>天猫</span>{{good.title}}</p><p class="zi">活动价¥{{good.phoneActivityPrice}} </p><p class="tu"><div>{{good.originPrice}}</div><div>立即抢购</div></p></div> </div> {{else if good.itemType=="TAOBAO"}}<div class="good"><img src=" {{good.image}}"><div><p><span>淘宝</span>{{good.title}}</p><p class="zi">活动价¥{{good.phoneActivityPrice}} </p><p class="tu"><div>{{good.originPrice}}</div><div>立即抢购</div></p></div> </div> {{/if}} {{/each}}</script><script src="jquery.js"></script><script src="template-web.js"></script><script src="index.js"></script> </body> </html>
首页css 样式 index.css
*{box-sizing: border-box; } html{height: 100%;} body{height: 100%;margin: 0;padding: 0;background-color: gainsboro; } header{background-color: white;height: 8%;position: fixed;top: 0;left: 0;right: 0;box-shadow: 0 0 10px gainsboro;z-index: 100;} #top{display: flex;align-items: center;height: 100%;/* background-color: red; */position: relative; } #top >img:nth-child(1){width: 140px; margin-left: 20px;} #bottom{position: fixed;bottom: 0px;z-index:100;width: 100%;height: 8%;background-color: white;display: flex;justify-content: space-around; } #bottom>a{display: inline-block;height: 100%; } #bottom>a>img{display: inline-block;height: 100%; } #top>input{margin-left: 30px;border-color: gainsboro;background-color: gainsboro;height: 60%;width:70%;border:none;border-radius: 35px; }#top>img:nth-child(3){width:80px;height: 80%;position: absolute;right: 10px; } #banner{/* display: block; */margin-top: 13% ;width: 100%;margin-bottom: 15px; } #banner1{/* margin-top: 13%; */width: 100%; } #ul>li:first-child{color:red;border-bottom: 2px solid red; } #ul >li{list-style: none;display:inline-block;color:black;margin-left:50px;font-size:30px;font-weight:100;line-height: 80px; } #mainMenuBar{width:100%;white-space:nowrap ;overflow-x: scroll;background-color: white;z-index:100; } .stick {border-top: 8px solid gainsboro;margin-top: 13.5% ;position:fixed;top:0; } #container{height: 100%;width:100%;overflow: scroll; } .good{width:100%;font-size: 30px;background-color: white;padding-top:15px;margin-bottom: 30px; } .good >img{width: 40%;display: inline-block; } .good>div{display: inline-block;width: 55%; }
首页js文件 index.js
$.getJSON('http://m.huipinzhe.com/h5/home/gethomepage',function(data){console.log(data);$('#banner').attr('src',data.data.HomeModelList[0].rows[0].image);var labels=data.data.labels;console.log(labels);for(var i=0;i<labels.length;i++){$('#ul').append('<li class="'+labels[i].id+'">'+labels[i].label+'</li>');}$(document).ready(function() {var $window = $(window),$mainMenuBar = $('#mainMenuBar'),$mainMenuBarAnchor = $('#mainMenuBarAnchor');$window.scroll(function() {var window_top = $window.scrollTop();var div_top = $mainMenuBarAnchor.offset().top;if (window_top > div_top) {$mainMenuBar.addClass('stick');$mainMenuBarAnchor.height($mainMenuBar.height());} else {$mainMenuBar.removeClass('stick');$mainMenuBarAnchor.height(0);}});});//初始值//商品列表初始 clickTurn(-1);//导航鼠标的点击事件$('#ul>li').click(function(){$(this).css({color:'red','border-bottom': '2px solid red',}).siblings().css({color:'black','border-bottom':'none',});var labelId=$(this).attr('class');//清空container中的内容 添加新的内容// $('#container').empty(); clickTurn(labelId);});});/* 推荐商品列表 */ function clickTurn(labelId){var page=0;var isFinsh;function getDataByPageNumber(){isFinsh=false;page++;if(page>12){alert('已经加载完毕');return;}$.post('http://m.huipinzhe.com/h5/home/gethomepage',{labelId : labelId ,pageNum : page},function(data){console.log(data.data.onlineData);var data=data.data.onlineData;var html=template('goods',data);$('#container').html(html);isFinsh=true;});}getDataByPageNumber();$('#container').scroll(function(event){console.log("滚动");if(event.target.scrollTop+event.target.clientHeight>event.target.scrollHeight-10){console.log('获取下一页数据');if(isFinsh){getDataByPageNumber();} } }); }
转载于:https://www.cnblogs.com/shaoxiaohuan/p/7661184.html
用$.getJSON() 和$.post()获取第三方数据做页面 ——惠品折页面(1)相关推荐
- 使用WebService技术获取第三方数据实现繁体字转换 WEB 服务
Web Service(WEB服务) 能够快捷和方便地综合并结合各种系统.商务和任何应用平台.新出现的 Web Services 标准: SOAP.WSDL 和 UDDI 能够使任何系统和系统之间的应 ...
- vue从后台获取新数据后刷新_vue传参页面刷新数据丢失问题
在做vue的时候,经常会遇到组件之间数据的传递问题,通过params或者query传参,但是,当页面刷新的时候,数据会丢失,找不到数据.今天经过总结,解决了这个问题.通过了一下几种情况进行传值: 通过 ...
- ts获取服务器数据_怎么使用Satruts2实现页面列表数据导出到Excel表格
Java codeprivate InputStream excelFile; public void setExcelFile(InputStream excelFile) { this.excel ...
- 第一方数据,第二方数据,第三方数据,都是什么意思?
数据无处不在--我们每天创造超过2.5艾字节(exabytes)的数据,研究人员预测到2025年将会有163泽字节(zettabytes)的数据.此外,还有许多种类的数据与企业有关.我们有第一方,第三 ...
- 使用JSONP,jQuery的ajax跨域获取json数据
网上找了很多资料,写的不错,推荐下: 1.深入浅出JSONP--解决ajax跨域问题 (http://www.cnblogs.com/chopper/archive/2012/03/24/240394 ...
- echarts图表动态获取后台数据详解(二)
前篇文章介绍了如何在现有的页面中,建立容器存放echarts图表,如何引入echarts.js文件,和配置图表库的路径.并将静态数据在页面上呈现出来.相当于是为动态获取后台数据做了铺垫.那么这篇文章, ...
- java $.getjson_JQuery 获取json数据$.getJSON方法的实例代码
jQuery系列 第八章 jQuery框架Ajax模块 第八章 jQuery框架Ajax模块 8.1 jQuery框架中的Ajax简介 Ajax技术的核心是XMLHTTPRequest对象,该对象是A ...
- $get服务器上的json文件,Web前端:$.getJSON获取json数据失败
JSON(JavaScriptObjectNotation,JS对象简谱)是一种轻量级的数据交换格式.它基于ECMAScript(欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本 ...
- 数据分析实例-获取某宝评论数据做词云图可视化
获取数据 首先要通过抓包分析网站的数据接口是什么,再构造请求头,发送请求,解析数据,最后保存数据.本项目以某宝上的一个商品的评论数据为例进行获取. 爬虫主代码: import requests imp ...
最新文章
- yolov3深度解析
- 转	Cocos2d-x3.0模版容器详解之三:cocos2d::Value
- Netweaver和CloudFoundry的log设置
- 职称计算机还用考试,职称计算机考试注意事项
- lambda python_Python | Lambda和filter()与示例
- mysql变量赋值加冒号_C语言变量声明加冒号的用法(占位符)
- 2021高通人工智能应用创新大赛--创新赛道-决赛阶段小结
- thinkpad e420 装完新系统后,耳机有声音,外音没有,解决方法
- android多版本打包,Android的持续化集成及多版本打包
- HP laserjet 1022n打印机总出现前端盖打开或者缺少硒鼓对话框,无法打印?
- Android 动画 Kotlin 教程
- python spss modeler 比较_非常值得收藏的 IBM SPSS Modeler 算法简介
- 联盛德 HLK-W806 (十二): Makefile组织结构和编译流程说明
- 计算机 不识u盘,电脑不认u盘了怎么办?
- 对话管理DST:Deep Neural Network Approach for the Dialog State Tracking Challenge
- Spatial-Spectral Transformer for Hyperspectral Image Classification_外文翻译
- vue 在线访问word,excel,pdf 文件以及打印
- 扫黑除恶Team第四次团队作业
- SPEC CPU简介和使用
- OTM1287A在MSM8909上的移植
热门文章
- php viewmodel,PHP日记——Lavarel常用语句之View篇
- element ui需要引入样式吗_彻底学会element-ui按需引入和纯净主题定制
- 3.10 神经网络的梯度下降法-推导
- Python BeautifulSoup库 API
- Pandas 矩阵运算
- python实现购物车总结_python3简单购物车实现
- 在虚拟宿主环境中承载 Active Directory 域控制器时需要考虑的事项
- Maven学习总结(48)——利用wagon-maven-plugin插件自动化部署Jar包/war包到Linux远程服务器
- Web应用的负载均衡、集群、高可用(HA)解决方案整理总结
- Linux学习总结(32)——Shell脚本高效编写技巧