ionic4.x仿京东 - 5.2.首页-猜你喜欢、商品列表api接口

最新推荐文章于 2021-03-10 18:07:02 发布
最新推荐文章于 2021-03-10 18:07:02 发布
阅读量305 收藏 1
点赞数
分类专栏： ionic
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZYYzyy1993/article/details/108393213
版权
ionic 专栏收录该内容
62 篇文章 5 订阅 ¥59.90 ¥99.00
订阅专栏
本文介绍了如何在Ionic4.x应用中使用API接口来实现京东风格的“猜你喜欢”和商品列表功能。详细讲解了API接口的使用，包括参数设置和返回数据说明，并提供了相关页面的TypeScript、HTML和SCSS代码示例，指导进行样式调整和功能实现。
摘要由CSDN通过智能技术生成
了解本专栏 订阅专栏 解锁全文
ZYYzyy1993
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
ionic4.x仿京东 - 6.2.分类-商品列表请求动态数据、上拉加载更多
ZYYzyy1993的博客
09-04 322
一、商品列表 1. 创建商品列表页面 ionic g page productlist 2. 页面跳转（点击tab2分类页面右侧的商品分类，跳转到商品列表页面，并把值传过来） （1）实现简单跳转 【tab2.page.html】 [routerLink]="['/productlist']" 【productlist.page.html】 返回按钮 i-back-button （2）传值[queryParams]="{cid:item._id}" 检验传值是否成功...
ionic4.x仿京东 - 10.1.4.购物车-全选反选、保存购物车状态、商品详情跳转到购物车
ZYYzyy1993的博客
10-11 317
一、全选反选 1.实现刚进来时，若商品前面的checkbox都选中，则全选按钮选中，只要有一个未选中，全选按钮未选中 思路：购物车里的商品数量 和 选中的商品数量进行对比，若相等，则全选 => 要封装一个获取选中的商品数量的函数 （1）在【cart.service.ts】里封装 获取选中的商品数量 的函数 （2）【tab3.page.ts】里 定义一个变量isCheckedAll，默认为true，表示全选 比较购物车数量和选中商品的数量，相等则全选为true，反之全选为false
php猜你喜欢实现,猜你喜欢接口,猜你喜欢流量入口,手淘首页推荐，猜你喜欢api...
weixin_34640051的博客
03-10 861
猜你喜欢入口基础版 API接口地址： http:///tool/accounts/st-guess接口介绍： 通过该接口生成链接下单生意参谋后台实时访客显示手淘推荐 点击查看详情请求方式： POST传参方式： form-data返回格式： JSON接口收费： 查询 1 次，计 1 次调用，联系销售可以拿到低价频率限制： 10 次/秒请求头参数参数类型必选值示例Authorizationstri...
淘宝号搜索标签查询，买家标签查询、人群标签查询、淘宝号搜索打标接口、买家标签查询接口、人群标签查询接口
juzi109101的博客
09-28 3269
淘宝号搜索标签查询，买家标签查询、人群标签查询、淘宝号搜索打标接口、马甲标签查询接口、人群标签查询接口 一、买家标签 1、买家的特定属性：性别、年龄、星座、地域、淘宝账号等级、淘宝信誉等。 2、买家最近的搜索、浏览、收藏加购、购买宝贝记录等; 3、买家订单属性：产品的客单价、类目偏好、风格特征、购买频次、购买渠道等; 二、怎样维护好标签呢 1、自我店铺定位和人群定位, 2、关键词修改符合人群年龄喜爱搜索的关键词，想要了解自己宝贝的关键词排名，就可以使用v兔中关键词查排名这个功能 3、通过店铺新品访客、喜欢相
ionic 实现商品分类
01-18
实现了首页商品分类，广告栏，分类菜单 <ion-view view-title="阿哥汇商城" hide-nav-bar="true"> <ion-header-bar align-title="left" class="bar-balanced"> <div class="buttons"> <!--ui-sref="category"--> <div class="button icon-left ion-navicon button-clear" ng-click="toggleCategory()"></div> <!--<div class="button icon-left ion-navicon button-clear" ng-click="modal.show()"></div>--> </div> <label class="item-input-wrapper" ui-sref="search" style="height: 33px;"> <i class="icon ion-ios-search placeholder-icon" style="margin: 20px 0px;color: #BBBBBB"></i> <input class="small-text" type="search" ng-model="searchStr" style="background: transparent;width: 100%" placeholder="请输入商品名称"> </label> <div class="buttons"> <div class="button icon-right ion-ios-cart-outline button-clear" ng-click="toCart()"></div> <i class="badge icon-right assertive" style="height:15px;font-size: 10px;margin-left: -10px;top: -8px;padding:0px 5px;float: inherit;background: #FFFFFF" ng-show="true">{{cartSize}}</i> </div> </ion-header-bar> <ion-content scroll="false" ng-show="isCategory" style="height:100%;background-color: rgba(0, 0, 0, 0.50);z-index: 900"> <div style="height: 85%;margin-bottom: 50px;"> <div class="row" style="width: 100%;height:100%;margin: 0;padding: 0;"> <div class="col-50" style="padding: 0;height: 100%;"> <div class="list" style="padding: 0"> <div class="item item-icon-right item-icon-left" ng-repeat="item in categoryAndProducts" ng-click="selectItem(item, $index)" ng-class="{active: activeItem == item}"> <i class="icon balanced" ng-class="iconArr[$index]"></i> {{item.cat_name}} <i class="icon ion-ios-arrow-right balanced" style="font-size: 24px;align-items:center"></i> </div> </div> </div> <div class="col-50" style="padding: 0;height: 100%;"> <div class="list" style="padding: 0;background: #dedede"> <div class="item active-item item-button-right" ng-repeat="cat in subCategory" ng-click="selectCategory(cat.cat_id)" style="background: #dedede"> {{cat.cat_name}} <button class="button button-clear">{{cat.goods_total}}ddd</button> </div> </div> </div> </div> </div> </ion-content> <ion-content class="false" overflow-scroll="true" style="overflow: hidden;"> <!-- <ion-refresher> 下拉刷新指令 --> <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()" spinner="android"></ion-refresher> <ion-slide-box active-slide="myActiveSlide" auto-play="true" does-continue="true" show-pager="true" slide-interval="2000" ng-if="ads" style="height: 108px;"> <ion-slide ng-repeat="ad in ads"> <div class="box blue"> <!--<h1>BLUE</h1>--> <img src="{{APPCONFIG.picURL}}/{{ad.src}}" style="width: 100%;height:inherit"> </div> </ion-slide> </ion-slide-box> <ion-list style=""> <ion-item style="padding: 0px;border-color:#FFF"> <!--<h2>{{item.id}}</h2>--> <div style="height: auto; width:100%;padding: 0"> <div class="row row-center" style="height: 40px;width: 100%;padding: 0;font-size: 16px" onclick="save($index)"> <i class="icon" style="width: 4px;height: 50%;background: {{colors[0]}}"></i> <div class="padding" style="width: 100%"><h2 style="font-size: 20px;color:{{colors[0]}}">热门店铺</h2></div> 更多<i class="icon icon-right ion-ios-arrow-right" style="font-size: 24px;margin-right: 20px;margin-left: 3px"></i> </div> <div class="row row-wrap" style="height:auto; width: 100%;padding: 0;margin-top: 0 "> <div class="col col-33 img" ng-repeat="image in hotsuppliers" style="margin: 0px;padding: 7px auto;height: 60px"> <img ng-src="{{APPCONFIG.picURL}}{{image.logo}}" style="height: 45px;width: 90px"/> </div> </div> <div style="background: #F3F3F3;height: 10px;width: 100%"></div> </div> </ion-item> <ion-item collection-repeat="item in categoryAndProducts" style="padding: 0;border-color:#FFF"> <!--<h2>{{item.id}}</h2>--> <div style="height: auto; width:100%;padding: 0"> <div class="row row-center" style="height: 40px;width: 100%;padding: 0;font-size: 16px" ng-click="selectCategory(item.cat_id)"> <i class="icon" style="width: 4px;height: 50%;background: {{colors[(item.cat_id%5)]}}"></i> <div class="padding" style="width: 100%"><h2 style="color: {{colors[(item.cat_id%5)]}};font-size: 20px"> {{item.cat_name}}</h2></div> 更多<i class="icon icon-left ion-ios-arrow-right" style="font-size: 24px;margin-right: 20px;margin-left: 3px"></i> </div> <div class="row row-center" style="padding: 0;margin-top: 0"> <div class="col-33" ng-repeat="product in item.goods" style="padding: 5px" ng-click="goProductDetail(product.goods_id)"> <div class="img" style="width: 100%"> <img class="item-product-img" ng-src="{{APPCONFIG.picURL}}/{{product.goods_thumb}}" style="width: 90px;height: 90px"> <div class="desc" style="text-overflow: ellipsis;white-space:nowrap; overflow:hidden;font-size: 16px;margin-top: 5px"> {{product.goods_name}} </div> <div style="background: #DEDFE0;height: 1px;margin: 2px"></div> <div class="desc assertive" style="text-overflow: ellipsis;overflow:hidden;font-size: 16px"><b>{{product.price | currency:"￥"}}</b></div> </div> </div> </div> <div style="background: #F3F3F3;height: 10px;width: 100%"></div> </div> </ion-item> </ion-list> </ion-content>
ionic4.x仿京东 - 9.2.登录-生命周期函数、EventEmitter
ZYYzyy1993的博客
10-10 135
最终目的： 上一章留下的bug-----修复后达到：点击登录按钮，回到tab4页面，立即显示用户名，普通会员，而不是刷新后才能显示 一、生命周期函数 1. Ionic4 中内置的生命周期函数： ionViewWillEnter—当进入一个页面时触发(如果它从堆栈返回) ionViewDidEnter—进入后触发 ionViewWillLeave—如果页面将离开触发 ionViewDidLeave—在页面离开后触发 ionViewWillUnload—页面卸载的时候会触发，如果无法触发使.
ionic-android-push-notification
05-07
使用Ionic和Node.js在Android上推送通知的示例 您必须按照本教程的说明向注册，生成KEY API和项目编号。 安装 $ cd app $ ionic platforms add android $ cd push-server $ npm install 必要的改变 /App/...
ionic-img-cache:Ionic 1.x应用程序的图像缓存
04-06
ionic-img-cache :framed_picture: 离子指令，用于在首次加载时缓存图像或元素背景图像。 在库的顶部工作。 该库可与Ionic Framework（v> = 1.0）一起使用，支持的平台为： 安卓 的iOS Windows Phone 8.1 ...
ionic-vue-适用于Ionic v4的Vue.js集成-Vue.js开发
05-27
Ionic-Vue用于Vue的Ionic集成适配器。 Ionic-Vue与@ ionic / vue的比较Ionic-Vue代码库已添加到Ionic内核中，并以@ ionic / vue的形式提供。 Ionic-Vue如何为Vue集成离子适配器。 Ionic-Vue与@ ionic / vue的比较...
Ionic3.x+、Angular4.x+ Cordova 介 绍以及Ionic3.x+环境搭建
02-13
Ionic3.x+、Angular4.x+ Cordova 介 绍以及Ionic3.x+环境搭建 一、Ionic 介绍............................................................................................................................1 二...
模仿京东商城实训小项目源码
07-22
这是我一个Android初学者对所学到的知识的一次综合运用，和真正的商城项目还有很大很大差距，有问题欢迎提出，一起努力！具体运行截图可以看我博客~ 主要实现以下方面： 商城界面设计 使用Fragment实现底部导航栏切换界面 使用Handler延迟跳转（启动页面延迟1秒跳转到主页面） BaseAdapter的使用（为listview填充数据） ViewHolder的使用（为listview滚动的时候快速设置值） Sqlite3数据库的创建以及增删查改（模拟存储购物车商品） SharedPreferences的使用（模拟存储收件人信息） 自定义Dialog（确认删除对话框） overridePendingTransition的使用（切换Activity时的动画效果）
京东商城Open API通用接口源码及开发实例（轻开版20151121）
11-21
通用接口实现类LinkJOS 扩展于：public class LinkJOS extends LinkOAuth2（LinkOAuth2 extends JspEasy） 构造函数 LinkJOS(HttpServletRequest request,HttpServletResponse response) 京东JOS接口访问函数 public String link2(String link,String method,Bag sys,Bag apps,String appSecret,String file,String FileField) 作用：访问京东JOS平台的所有接口 参数： String link，京东JOS平台接口访问地址，目前固定为：https://api.jd.com/routerjson String method，向京东JOS平台提交数据时的方法，需要应用级别参数时建议用POST方法，不需要时用GET（参见后边的实例） Bag sys，系统级别参数书包（一般只需在接口参数文件中放入接口方法即可，参见后边的实例） Bag apps，应用级别参数书包（在接口参数文件中放入必须的应用级别参数，若不需要应用级别参数时直接用new Bag(-1)构造一个空书包即可，参见后边的实例） String appSecret，应用证书中的App Secret，前边已经设置，固定用"@{pPage:app_secret}"即可 String file，调用上传文件接口上传文件（如图片）到京东JOS平台时的文件全名（含相对路径，如：images/logo.png），不是调用上传文件接口时为空字符串即可（参见后边的实例） String FileField，调用上传文件接口上传文件（如图片）到京东JOS平台时的字段名，配合前边的参数，不是调用上传文件接口时为空字符串即可（参见后边的实例） 返回为京东JOS平台接口对应的JSON格式的字符串 JSON文本解析方法 public void parseJson(String json) 作用：解析京东JOS平台接口返回的JSON格式的字符串，并根据内容生成N个对应的书包 参数：String json，京东JOS平台接口返回的JSON格式的字符串 根据JSON文本的内容在系统中生成N个书包，根书包名称为j0，下一层的josn文本内容生成的书包名称用上一层的Key放在上一层的书名中，下边用实例说明寻找对应书包的方法： 如店铺信息查询接口jingdong.vender.shop.query返回的json文本为 { "jingdong_vender_shop_query_responce": { "shop_jos_result": { "open_time": "", "shop_id": "", "category_main_name": "", "category_main": "", "vender_id": "", "brief": "", "logo_url": "", "shop_name": "" } } } 找出店铺信息书包名的方法如下 @{j0:jingdong_vender_shop_query_responce} @{@{pPage:bag}:shop_jos_result} 这时候的@{pPage:bag}即为需要的店铺信息书包名 具体用法请阅读下载包中的《京东卖家如何快速开发网店工具软件》
ionic3仿京东商城源码
03-29
ionic3仿京东商城源码,非常好用的ionic3学习参考资料。
ionic购物商城demo源码
02-18
简单的一个由ionic开发的商城demo，欢迎多提意见
使用ionic3ag4编写模仿京东商城的demo
08-10
在本文中，我们将深入探讨如何使用Ionic 3和Angular 4框架来构建一个模仿京东商城的混合移动应用。这两个强大的工具结合在一起，可以为开发者提供跨平台的移动应用开发能力，利用Web技术栈（HTML、CSS和JavaScript）...
电商API——拍立淘下的猜你喜欢
weixin_52751465的博客
02-27 705
电商api之拍立淘下的猜你喜欢 数据展示：（文章篇幅有限，展示部分） 跟上篇文章可以一起看，是同一页面的数据 "data": { "iconStyle": { "guanggao": { "dark": { "bgColor": "#FFFFFF", "color": "#FFFFFF", "height": "24", "img": "https://gw.alicdn.com/tfs
ionic4.x仿京东 - 4.2.注册
ZYYzyy1993的博客
09-03 133
一、注册流程 => => tab4 login register-step1 register-step2 register-step3 二、创建注册页面 ionic g page register-step1 ionic g page register-step...
ionic4.x仿京东 - 2.4.我的
ZYYzyy1993的博客
09-01 128
一、列表 【tab4.page.html】 效果图： 去掉“我的订单”栏下划线<ion-item line="none"> ion-item-divider修改高度：在【tab4.page.scss】 用min-height，因为发现height没有效果 最终代码： 【tab4.page.html】 <ion-header> <ion-toolbar> <ion-title>tab4</ion-title>...
猜你喜欢-----推荐系统原理介绍
weixin_34033624的博客
05-15 893
写在正文之前   近期在做推荐系统，在项目组内做了一个分享。今天有些时间。就将逻辑梳理一遍，将ppt内容用文字沉淀下来，便于接下来对推荐系统的进一步研究。推荐系统确实是极度复杂，要走的路还非常长。   A First Glance     为什么须要推荐系统——信息过载   随着互联网行业的井喷式发展，获取信息的方式越来越多...
@ionic-native/in-app-browser怎么使用
最新发布
06-04
@ionic-native/in-app-browser是一个Ionic Native插件，它提供了一个原生InAppBrowser对象用于在应用程序中打开外部网页或文档。 要使用@ionic-native/in-app-browser，您需要执行以下步骤： 1. 在您的Ionic项目中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ZYYzyy1993

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值