ionic4.x仿京东 - 10.1.1.购物车-商品属性选择、添加到购物车

于 2020-10-10 15:30:37 发布
阅读量207 收藏
点赞数
分类专栏： ionic
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZYYzyy1993/article/details/108996394
版权
ionic 专栏收录该内容
62 篇文章 5 订阅 ¥59.90 ¥99.00
订阅专栏
本文详细介绍了如何在Ionic4.x应用中实现商品属性选择功能，包括监听点击事件、添加活性样式以及默认选中第一个选项。同时，文章也探讨了商品数量的双向绑定操作。最后，讨论了将商品添加到购物车的逻辑，通过控制台输出展示了关键代码片段。
摘要由CSDN通过智能技术生成

一、商品属性选择

1.【pcontent.page.html】

找到attr这个div，整个用一个div包裹住，命名为myAttr，监听点击事件叫changeAttr($event)，传入事件对象event

2.【pcontent.page.ts】

（1）看看e到底是什么

将e.srcElement打印出来，控制台输出：（获取到当前点击的元素的节点，原生JS）

将e.srcElement.nodeName打印出来，控制台输出：（获取到当前点击的元素的节点的标签名，原生JS）

了解本专栏 订阅专栏 解锁全文
ZYYzyy1993
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
ionic4.x仿京东 - 10.1.2.购物车-显示购物车数据
ZYYzyy1993的博客
10-10 250
两种方法： 把商品数据放在本地存储localstorage里，此方法不需要登录 把商品数据和用户信息一起传给服务器，服务器存在表里，进入购物车页面，再向服务器请求数据，进行显示，此方法需要登录才可以 此处演示第一种本地存储的方法 一、思路和步骤（点击“添加购物车”按钮后，商品信息和属性信息保存到localStorage） 1.准备工作 （1）新建一个购物车服务 ionic g service services/cart （2）在【app.module.ts】里配置CartServic.
ionic4.x仿京东 - 10.1.4.购物车-全选反选、保存购物车状态、商品详情跳转到购物车
ZYYzyy1993的博客
10-11 314
一、全选反选 1.实现刚进来时，若商品前面的checkbox都选中，则全选按钮选中，只要有一个未选中，全选按钮未选中 思路：购物车里的商品数量 和 选中的商品数量进行对比，若相等，则全选 => 要封装一个获取选中的商品数量的函数 （1）在【cart.service.ts】里封装 获取选中的商品数量 的函数 （2）【tab3.page.ts】里 定义一个变量isCheckedAll，默认为true，表示全选 比较购物车数量和选中商品的数量，相等则全选为true，反之全选为false
ionic 购物车
cdb_680的博客
11-20 209
body { width: 800px; margin: 0 auto; } ul: { float: left; } #content { width: 600px; background-color: red; float: right; } angular.module("myapp", ["ionic"]) .config(function($st
ionic-简单购物车
Rbh73692的博客
10-20 742
//主要功能页面 html> html ng-app="BShop"> head > meta charset="UTF-8"> meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> link href="css/c
ionic静态购物车实现
xy8199的博客
10-19 1441
前几篇对ionic进行了初步的了解，接下来我们要在实战中进行操作，对所学知识进行拼凑，达到真正的灵活运用。接下来我们做一个小demo，一个静态的购物车。 例图效果： 源码： index.html html> html ng-app="BShop"> head> meta charset="UTF-8"> meta name="viewport" co
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: ... 将imgcache.js和ionic-img-cache.min.js文件添加到您的应用程序index.html文件中。 安装所需的： cordova plugin add cordova-plugin-device cordova plugin add cor
ionic-vue-适用于Ionic v4的Vue.js集成-Vue.js开发
05-27
Ionic-Vue与@ ionic / vue的比较Ionic-Vue代码库已添加到Ionic内核中，并以@ ionic / vue的形式提供。 Ionic-Vue如何为Vue集成离子适配器。 Ionic-Vue与@ ionic / vue的比较Ionic-Vue代码库已添加到Ionic内核中，并...
Ionic3.x+、Angular4.x+ Cordova 介 绍以及Ionic3.x+环境搭建
02-13
Ionic3.x+、Angular4.x+ Cordova 介 绍以及Ionic3.x+环境搭建 一、Ionic 介绍............................................................................................................................1 二...
使用ionic3ag4编写模仿京东商城的demo
08-10
4. **购物车（Shopping Cart）**：实现添加商品到购物车、查看购物车内容和结算功能。可以使用服务（Service）来存储购物车状态，使用`ngModel`双向数据绑定更新购物车信息。 5. **登录/注册（Login/Signup）**：...
ionic2开发的仿外卖点餐系统(Ionic2+Angular2...包含CSS3飞入购物车效果和各种组件用法)
07-06
first（首先）: make sure your computer install ionic 确保你的电脑安装了ionic2,不懂自行百度 second（其次）: $ ionic start wechat_restaurant tutorial --v2 third（然后）: find local file: /wechat_restaurant , then delete all files except on /node_modules in /wechat_restaurant , then copy all files downloaded here into /wechat_restaurant 找到刚刚安在本地的项目wechat_restaurant文件夹，删除除了node_modules文件夹以外的所有文件，复制从这里下载的所有文件到项目wechat_restaurant中 finally（最后）: $ npm install $ npm install jquery $ ionic serve
ionic-shopping-cart-2, 离子cordova购物车应用.zip
09-17
ionic-shopping-cart-2, 离子cordova购物车应用 购物车更新( 10-07-2016 )FoodKart v0.3 已经发布。 在这里阅读完整的教程系列。 FoodKart v0.2 FoodKart是一个简单的食品购买应用，构建在 HTML5 - Cordova 。 因为
Ionic.Utils.Zip 1.3-1.7版本
06-12
《Ionic.Utils.Zip 1.3-1.7版本：深入解析与应用》 Ionic.Utils.Zip是一款基于.NET Framework的开源库，由Koogra开发，专为处理ZIP文件格式而设计。该库提供了一系列方便易用的API，允许开发者在.NET环境中进行高效...
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
11-28
这里所说的正向传值指的是如有两个页面，我们简称 页面A 和 页面B,正向指的是A跳转到B,比如一个商品跳转这个商品的详情页面。 正向传值Ionic3.x主要有2种 标签上直接跳转 Js跳转 1) 标签上直接跳转 Ionic3.x对...
Ionic3-D3-Chart:Ionic3 D3.js
05-15
【标题】"Ionic3-D3-Chart：使用D3.js在Ionic3框架中的图表应用" 【描述】"这个项目展示了如何在Ionic3框架内集成D3.js库来创建动态、交互式的图表。它是一个Android APK应用程序，允许用户在移动设备上体验基于D3...
Ionic实战二：购物车
aochou19810706的博客
06-22 99
用户名密码都为空 此app功能主要有如下 1.首页轮播和商品列表展示 2.左侧侧滑页面分类展示 3.商品详情页面展示 以及购买 4.购物车 订单填写 支付等页面           转载于:https://www.cnblogs.com/quickcodes/p/Ionic-shi-zhan-er-gou-wu-che.html...
ionic4学习笔记14-某东项目购物车列表
tongle_deng的专栏
06-26 173
1、html页面内容 <ion-content> <dl class="cart_list"> <dt> <ion-checkbox color="danger"></ion-checkbox> <div class="img"> <img src="assets/03.jpg" /> </div> </dt> &l
ionic3项目实战教程 - 第8讲 ionic3商品详情页的实现
weixin_34019144的博客
08-23 247
这一讲主要包含以下几个部分： 1.创建商品详情页 2.获取商品详情页的数据 3.展示商品详情页的数据 1.创建商品详情页 执行 ionic g page product-details 8-1.png 实现点击商品列表项时跳转到商品详情页： 在ion-products.html中增加(...
ionic 下拉选择过滤筛选
zhaoyue960607的博客
03-18 835
html <div> <ion-select [(ngModel)]="TYPE_ID" (ngModelChange)="switchType()" okText="确定" cancelText="取消" mode="ios"> <ion-select-option value="0">全部</ion-select-option&...
@ionic-native/in-app-browser怎么使用
最新发布
06-04
@ionic-native/in-app-browser是一个Ionic Native插件，它提供了一个原生InAppBrowser对象用于在应用程序中打开外部网页或文档。 要使用@ionic-native/in-app-browser，您需要执行以下步骤： 1. 在您的Ionic项目中安装插件： ``` npm install @ionic-native/in-app-browser ``` 2. 在需要使用该插件的组件中导入插件： ``` import { InAppBrowser } from '@ionic-native/in-app-browser/ngx'; ``` 3. 在构造函数中注入插件： ``` constructor(private iab: InAppBrowser) { } ``` 4. 在需要打开外部网页或文档的位置使用以下代码： ``` const browser = this.iab.create('https://ionicframework.com/'); ``` 其中，'https://ionicframework.com/'是您需要打开的网址。 这样，就可以使用@ionic-native/in-app-browser打开外部网页或文档了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

ZYYzyy1993

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

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

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

打赏作者

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

抵扣说明：

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

余额充值