简单实现IONIC购物车功能

本文实例为大家分享了IONIC购物车的具体代码，供大家参考，具体内容如下
HTML

<div ng-app="app"><div class="l-header"> <div class="l-cart"><div class="l-cart-count" ng-click="showCart = ！showCart">{{ calculateTotalProducts（） }}</div><div class="l-cart-items" ng-show="showCart"><div ng-show="cart.length"> <ul> <li ng-repeat="item in cart"><div class="l-cart-item-name">{{ item.product.name }}</div><div class="l-cart-item-quantity"><input type="number" ng-model="item.quantity" ng-change="removeIfZero（item）" /></div><div class="l-cart-item-subtotal">{{ item.quantity * item.product.price | currency }}</div><div class="remove-item"><img src="https://cdn3.iconfinder.com/data/icons/cleaning-icons/512/Trash_Can-512.png" ng-click="removeFromCart（item）"></div> </li> </ul><div class="l-cart-total">total <b>{{ calculateTotalPrice（） | currency }}</b></div></div><div class="l-cart-empty" ng-hide="cart.length">tu carrito está vacío</div></div> </div> </div><ul class="l-stock"> <li class="l-product" ng-repeat="product in stock" ng-click="addToCart（product）" ng-class="{"is-on-cart": isProductOnCart（product）}"><div class="l-product-name">{{ product.name }}</div><div class="l-product-price">{{ product.price | currency }}</div> </li> </ul> </div>

CSS:

body color #333 padding 60px 10px 10px 10px font-family Arial, Helvetica, sans-serif user-select none.is-red color red ！important.l-header display flex justify-content flex-end align-items center position fixed top 0 right 0 left 0 height 30px padding 10px background-color #2c3e50.l-cart position relative.l-cart-count font-size 12px font-weight 700 width 30px line-height 30px text-align center color #ecf0f1 background-color #27ae60 border-radius 50% cursor pointer.l-cart-items position absolute top 100% right 0 width 270px margin 10px -10px 0 0 padding 10px font-size 12px background-color #ecf0f1&:before content "" position absolute bottom 100% right 15px margin 0 0 -2px 0 border 10px solid transparent border-bottom-color #ecf0f1li display flex align-items center padding-bottom 10px margin-bottom 10px.l-cart-item-name flex 1 overflow hidden white-space nowrap text-overflow ellipsis.l-cart-item-quantity width 30px margin 0 10pxinput display block border none padding 5px margin 0 width 100% text-align right appearance none&:focusoutline nonebackground-color #ffc&::-webkit-outer-spin-button, &::-webkit-inner-spin-button-webkit-appearance nonemargin 0.l-cart-item-subtotal color #000 width 70px text-align right .remove-item img width:30px height:30px margin 0 10px text-align center.l-cart-total margin-top 10 padding-top 10px text-align right border-top 1px solid #bdc3c7b font-weight 700 font-size 1.4em.l-cart-empty text-align center font-size 1.4em color #95a5a6.l-stock& > li float left margin 0 10px 10px 0&:after content "" clear both.l-product display flex color #fff cursor pointer& > div padding 10px.l-product-name background-color #2980b9.l-product-price background-color #3498db .is-on-cart .l-product-name background-color #27ae60 .l-product-price background-color #2ecc71

/*** Esta función genera productos aleatoriamente* （http://marak.com/faker.js/）**/function fetchStock （） {var i = 0, stock = [], total = faker.random.number（{min: 10, max: 30}）;for （i = 0; i < total; i++） {stock.push（{name : faker.commerce.productName（）,price: faker.random.number（{min: 1, max: 500}） }）; }return stock;};/*** Aquí empieza nuestro código Angular...**/var app = angular.module（"app", []）;app.run（function （$rootScope） { var cart = [], stock = fetchStock（）;var addToCart = function （product） {var item = cart.find（function （item） {return item.product === product; }）;if （item） {item.quantity++; } else {cart.push（{product : product,quantity: 1}）; } };var removeFromCart = function （item） {var index = cart.indexOf（item）;cart.splice（index, 1）; };var removeIfZero = function （item） {if （item.quantity < 1） {removeFromCart（item）; } };var calculateTotalPrice = function （） {return cart.reduce（function （sum, item） {return sum + item.quantity * item.product.price;}, 0）; };var calculateTotalProducts = function （） {return cart.reduce（function （sum, item） { return sum + item.quantity; }, 0）; };var isProductOnCart = function （product） {return cart.some（function （item） {return item.product === product; }）; };angular.extend（$rootScope, { stock: stock, cart: cart, addToCart: addToCart, removeFromCart: removeFromCart, removeIfZero: removeIfZero, calculateTotalPrice: calculateTotalPrice, calculateTotalProducts: calculateTotalProducts, isProductOnCart: isProductOnCart }）;}）;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。