简单实现IONIC购物车功能
本文实例为大家分享了IONIC购物车的具体代码,供大家参考,具体内容如下
HTML
<divng-app="app"> <divclass="l-header"> <divclass="l-cart"> <divclass="l-cart-count"ng-click="showCart=!showCart">{{calculateTotalProducts()}}</div> <divclass="l-cart-items"ng-show="showCart"> <divng-show="cart.length"> <ul> <ling-repeat="itemincart"> <divclass="l-cart-item-name">{{item.product.name}}</div> <divclass="l-cart-item-quantity"> <inputtype="number"ng-model="item.quantity"ng-change="removeIfZero(item)"/> </div> <divclass="l-cart-item-subtotal">{{item.quantity*item.product.price|currency}}</div> <divclass="remove-item"> <imgsrc="https://cdn3.iconfinder.com/data/icons/cleaning-icons/512/Trash_Can-512.png"ng-click="removeFromCart(item)"> </div> </li> </ul> <divclass="l-cart-total">total<b>{{calculateTotalPrice()|currency}}</b></div> </div> <divclass="l-cart-empty"ng-hide="cart.length">tucarritoestávacío</div> </div> </div> </div> <ulclass="l-stock"> <liclass="l-product"ng-repeat="productinstock"ng-click="addToCart(product)"ng-class="{'is-on-cart':isProductOnCart(product)}"> <divclass="l-product-name">{{product.name}}</div> <divclass="l-product-price">{{product.price|currency}}</div> </li> </ul> </div>
CSS:
body color#333 padding60px10px10px10px font-familyArial,Helvetica,sans-serif user-selectnone .is-red colorred!important .l-header displayflex justify-contentflex-end align-itemscenter positionfixed top0 right0 left0 height30px padding10px background-color#2c3e50 .l-cart positionrelative .l-cart-count font-size12px font-weight700 width30px line-height30px text-aligncenter color#ecf0f1 background-color#27ae60 border-radius50% cursorpointer .l-cart-items positionabsolute top100% right0 width270px margin10px-10px00 padding10px font-size12px background-color#ecf0f1 &:before content"" positionabsolute bottom100% right15px margin00-2px0 border10pxsolidtransparent border-bottom-color#ecf0f1 li displayflex align-itemscenter padding-bottom10px margin-bottom10px .l-cart-item-name flex1 overflowhidden white-spacenowrap text-overflowellipsis .l-cart-item-quantity width30px margin010px input displayblock bordernone padding5px margin0 width100% text-alignright appearancenone &:focus outlinenone background-color#ffc &::-webkit-outer-spin-button, &::-webkit-inner-spin-button -webkit-appearancenone margin0 .l-cart-item-subtotal color#000 width70px text-alignright .remove-itemimg width:30px height:30px margin010px text-aligncenter .l-cart-total margin-top10 padding-top10px text-alignright border-top1pxsolid#bdc3c7 b font-weight700 font-size1.4em .l-cart-empty text-aligncenter font-size1.4em color#95a5a6 .l-stock &>li floatleft margin010px10px0 &:after content"" clearboth .l-product displayflex color#fff cursorpointer &>div padding10px .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
JS
/** *Estafuncióngeneraproductosaleatoriamente *(http://marak.com/faker.js/) **/ functionfetchStock(){ vari=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}) }); } returnstock; }; /** *AquíempiezanuestrocódigoAngular... **/ varapp=angular.module('app',[]); app.run(function($rootScope){ varcart=[], stock=fetchStock(); varaddToCart=function(product){ varitem=cart.find(function(item){ returnitem.product===product; }); if(item){ item.quantity++; }else{ cart.push({ product:product, quantity:1 }); } }; varremoveFromCart=function(item){ varindex=cart.indexOf(item); cart.splice(index,1); }; varremoveIfZero=function(item){ if(item.quantity<1){ removeFromCart(item); } }; varcalculateTotalPrice=function(){ returncart.reduce(function(sum,item){ returnsum+item.quantity*item.product.price; },0); }; varcalculateTotalProducts=function(){ returncart.reduce(function(sum,item){ returnsum+item.quantity; },0); }; varisProductOnCart=function(product){ returncart.some(function(item){ returnitem.product===product; }); }; angular.extend($rootScope,{ stock:stock, cart:cart, addToCart:addToCart, removeFromCart:removeFromCart, removeIfZero:removeIfZero, calculateTotalPrice:calculateTotalPrice, calculateTotalProducts:calculateTotalProducts, isProductOnCart:isProductOnCart }); });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。