ionic-简单购物车

最新推荐文章于 2020-10-10 15:30:37 发布
原创 最新推荐文章于 2020-10-10 15:30:37 发布 · 805 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个使用Ionic框架开发的电商应用案例，包括主要功能页面的设计与实现，如首页、购物车和个人中心等页面的布局及交互效果。

//主要功能页面

<!DOCTYPE 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/css.css" rel="stylesheet">
    <link href="ionic-v1.3.3/css/ionic.css" rel="stylesheet">
    <script type="text/javascript" src="ionic-v1.3.3/js/ionic.bundle.js"></script>
    <title></title>
    <script type="text/javascript">
        var BShop = angular.module("BShop", ["ionic"]);
        BShop.config(function($stateProvider,$urlRouterProvider){
            $stateProvider.state("home",{
                url:"/home",
                views:{
                    "view-home":{
                        templateUrl:"home/home.html",
                        controller:"HomeCtrl"
                    }
                }
            }).state("cart",{
                url:"/cart",
                views:{
                    "view-cart":{
                        templateUrl:"cart/cart.html"

                    }
                }
            }).state("mine",{
                url:"/mine",
                views:{
                    "view-mine":{
                        templateUrl:"mine/mine.html"

                    }
                }
            });
            $urlRouterProvider.otherwise("home");
        });

        BShop.controller("HomeCtrl", function ($scope, $ionicSideMenuDelegate) {
            $scope.toggleLeft = function () {
                $ionicSideMenuDelegate.toggleLeft();
            }
        });
    </script>
</head>
<body>
<ion-nav-bar></ion-nav-bar>
<!--侧滑页面-->
<ion-side-menus>
    <ion-pane ion-side-menu-content>
        <ion-nav-bar class="bar-stable nav-title-slide-ios"></ion-nav-bar>
        <ion-nav-view animation="slide-left-right">

            <ion-nav-view name="view-home"></ion-nav-view>

        </ion-nav-view>
    </ion-pane>

    <ion-side-menu side="left" class="mine">
        <header class="bar bar-header bar-stable">
            <h1 class="title">个人中心</h1>
        </header>
        <ion-content class="has-header">
            <div class="avatar">
                <img src="img/mine_avatar.jpg" width="80px" height="80px"/>

                <p>姓名</p>
            </div>
            <div class="list">
                <a class="item item-icon-left item-icon-right">
                    <i class="icon ion-clipboard"></i>
                    我的订单
                    <i class="icon ion-ios-arrow-right"></i>
                </a>

                <a class="item item-icon-left item-icon-right">
                    <i class="icon ion-star"></i>
                    我的收藏
                    <i class="icon ion-ios-arrow-right"></i>
                </a>

                <a class="item item-icon-left item-icon-right">
                    <i class="icon ion-gear-a"></i>
                    设置
                    <i class="icon ion-ios-arrow-right"></i>
                </a>
            </div>

        </ion-content>
    </ion-side-menu>
</ion-side-menus>
<!--路由选项卡-->
<ion-tabs class="tabs-positive tabs-icon-top">
    <ion-tab title="首页" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline" ui-sref="home">
        <!--<ion-nav-view name="view-home"></ion-nav-view>-->
    </ion-tab>

    <ion-tab title="购物车" icon-on="ion-ios-cart" icon-off="ion-ios-cart-outline" ui-sref="cart">
        <ion-nav-view name="view-cart"></ion-nav-view>
    </ion-tab>

    <ion-tab title="我的" icon-on="ion-ios-person" icon-off="ion-ios-person-outline" ui-sref="mine">
        <ion-nav-view name="view-mine"></ion-nav-view>
    </ion-tab>
</ion-tabs>
</body>
</html>

//首页页面

<ion-view title="首页" class="home">
    <header class="bar">
        <h1 class="title">首页</h1>
    </header>

    <ion-nav-buttons side="left">
        <button class="button button-icon ion-ios-more"
                ng-click="toggleLeft()"></button>

    </ion-nav-buttons>


<ion-content>
    <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>
    <ion-list>
        <ion-item>
            <div class="picture">
                <img src="img/book_01.jpg" width="128px" height="128px">
            </div>
            <div class="details">
                <h2>Java编程思想</h2>
                <h3>C++、Java中的圣经级著作</h3>
                <div>
                    <span>{{86.4 | currency:"￥"}}</span>
                    <i class="icon ion-ios-cart"></i>
                </div>
            </div>
        </ion-item>
        <ion-item>
            <div class="picture">
                <img src="img/book_01.jpg" width="128px" height="128px">
            </div>
            <div class="details">
                <h2>Java编程思想</h2>
                <h3>C++、Java中的圣经级著作</h3>
                <div>
                    <span>{{86.4 | currency:"￥"}}</span>
                    <i class="icon ion-ios-cart"></i>
                </div>
            </div>
        </ion-item>
        <ion-item>
            <div class="picture">
                <img src="img/book_01.jpg" width="128px" height="128px">
            </div>
            <div class="details">
                <h2>Java编程思想</h2>
                <h3>C++、Java中的圣经级著作</h3>
                <div>
                    <span>{{86.4 | currency:"￥"}}</span>
                    <i class="icon ion-ios-cart"></i>
                </div>
            </div>
        </ion-item>
        <ion-item>
            <div class="picture">
                <img src="img/book_01.jpg" width="128px" height="128px">
            </div>
            <div class="details">
                <h2>Java编程思想</h2>
                <h3>C++、Java中的圣经级著作</h3>
                <div>
                    <span>{{86.4 | currency:"￥"}}</span>
                    <i class="icon ion-ios-cart"></i>
                </div>
            </div>
        </ion-item>
        <ion-item>
            <div class="picture">
                <img src="img/book_01.jpg" width="128px" height="128px">
            </div>
            <div class="details">
                <h2>Java编程思想</h2>
                <h3>C++、Java中的圣经级著作</h3>
                <div>
                    <span>{{86.4 | currency:"￥"}}</span>
                    <i class="icon ion-ios-cart"></i>
                </div>
            </div>
        </ion-item>
        <ion-item>
            <div class="picture">
                <img src="img/book_01.jpg" width="128px" height="128px">
            </div>
            <div class="details">
                <h2>Java编程思想</h2>
                <h3>C++、Java中的圣经级著作</h3>
                <div>
                    <span>{{86.4 | currency:"￥"}}</span>
                    <i class="icon ion-ios-cart"></i>
                </div>
            </div>
        </ion-item>

    </ion-list>
</ion-content>
</ion-view>

//购物车

<ion-view title="购物车" class="cart">
    <header class="bar">
        <h1 class="title">购物车</h1>
    </header>
    <ion-content>
        <ion-list>
            <ion-item>
                <div class="picture">
                    <img src="img/book_01.jpg" width="128px" height="128px">
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>{{86.4 | currency:"￥"}}</h3>

                    <div>
                        <i class="icon ion-minus-circled"></i>
                        <span> 1 </span>
                        <i class="ion-plus-circled"></i>
                        <i class="ion-android-delete"></i>
                    </div>
                </div>
            </ion-item>
            <ion-item>
                <div class="picture">
                    <img src="img/book_01.jpg" width="128px" height="128px">
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>{{86.4 | currency:"￥"}}</h3>

                    <div>
                        <i class="icon ion-minus-circled"></i>
                        <span> 1 </span>
                        <i class="icon ion-plus-circled"></i>
                        <i class="icon ion-android-delete"></i>
                    </div>
                </div>
            </ion-item>
            <ion-item>
                <div class="picture">
                    <img src="img/book_01.jpg" width="128px" height="128px">
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>{{86.4 | currency:"￥"}}</h3>

                    <div>
                        <i class="icon ion-minus-circled"></i>
                        <span> 1 </span>
                        <i class="icon ion-plus-circled"></i>
                        <i class="icon ion-android-delete"></i>
                    </div>
                </div>
            </ion-item>
            <ion-item>
                <div class="picture">
                    <img src="img/book_01.jpg" width="128px" height="128px">
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>{{86.4 | currency:"￥"}}</h3>

                    <div>
                        <i class="icon ion-minus-circled"></i>
                        <span> 1 </span>
                        <i class="icon ion-plus-circled"></i>
                        <i class="icon ion-android-delete"></i>
                    </div>
                </div>
            </ion-item>
            <ion-item>
                <div class="picture">
                    <img src="img/book_01.jpg" width="128px" height="128px">
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>{{86.4 | currency:"￥"}}</h3>

                    <div>
                        <i class="icon ion-minus-circled"></i>
                        <span> 1 </span>
                        <i class="icon ion-plus-circled"></i>
                        <i class="icon ion-android-delete"></i>
                    </div>
                </div>
            </ion-item>
            <ion-item>
                <div class="picture">
                    <img src="img/book_01.jpg" width="128px" height="128px">
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>{{86.4 | currency:"￥"}}</h3>

                    <div>
                        <i class="icon ion-minus-circled"></i>
                        <span> 1 </span>
                        <i class="icon ion-plus-circled"></i>
                        <i class="icon ion-android-delete"></i>
                    </div>
                </div>
            </ion-item>
        </ion-list>



    </ion-content>
</ion-view>


//我的页面
<ion-view title="我的" class="mine">
    <header class="bar">
        <h1 class="title">我的</h1>
    </header>

    <ion-nav-buttons side="right">
        <button class="button button-icon ion-ios-compose-outline" ng-click="toggleLeft()"></button>
    </ion-nav-buttons>

    <ion-content>
        <div class="avatar">
            <img src="img/mine_avatar.jpg" width="80px" height="80px"/>

            <p>文静</p>
        </div>
        <div class="list">
            <a class="item item-icon-left item-icon-right">
                <i class="icon ion-clipboard"></i>
                我的订单
                <i class="icon ion-ios-arrow-right"></i>
            </a>
            <a class="item item-icon-left item-icon-right">
                <i class="icon ion-star"></i>
                我的收藏
                <i class="icon ion-ios-arrow-right"></i>
            </a>

            <a class="item item-icon-left item-icon-right">
                <i class="icon ion-gear-a"></i>
                设置
                <i class="icon ion-ios-arrow-right"></i>
            </a>
        </div>

    </ion-content>
</ion-view>
//css页面
.home .picture {
    float: left;
}

.home .details h3 {
    margin-top: 16px;
}

.home .details div {
    margin-top: 48px;
}

.home .details span {
    color: red;
    font-size: large;
}

.home .details .ion-ios-cart {
    position: absolute;
    right: 16px;
}


.cart .picture{
    float: left;
}
.cart .details h3 {
    margin-top: 16px;
    color: red;
    font-size: large;
}

.cart .details div {
    margin-top: 16px;
}
.cart .details div .ion-android-delete{
    position: absolute;
    right: 16px;
}
.mine .avatar{
    width: 100%;
    height: 160px;
    background: url("../img/mine_bg.jpg") no-repeat;
    background-size: cover;
    text-align: center;

}
.mine .avatar img{
    border-radius: 50%;
    margin-top: 30px;

}


//路由侧滑...

xsw73692
关注
ionic4.x仿京东 - 10.1.4.购物车-全选反选、保存购物车状态、商品详情跳转到购物车
ZYYzyy1993的博客
10-11 378
一、全选反选 1.实现刚进来时，若商品前面的checkbox都选中，则全选按钮选中，只要有一个未选中，全选按钮未选中 思路：购物车里的商品数量 和 选中的商品数量进行对比，若相等，则全选 => 要封装一个获取选中的商品数量的函数 （1）在【cart.service.ts】里封装 获取选中的商品数量 的函数 （2）【tab3.page.ts】里 定义一个变量isCheckedAll，默认为true，表示全选 比较购物车数量和选中商品的数量，相等则全选为true，反之全选为false
ionic4.x仿京东 - 10.1.2.购物车-显示购物车数据
ZYYzyy1993的博客
10-10 297
两种方法： 把商品数据放在本地存储localstorage里，此方法不需要登录 把商品数据和用户信息一起传给服务器，服务器存在表里，进入购物车页面，再向服务器请求数据，进行显示，此方法需要登录才可以 此处演示第一种本地存储的方法 一、思路和步骤（点击“添加购物车”按钮后，商品信息和属性信息保存到localStorage） 1.准备工作 （1）新建一个购物车服务 ionic g service services/cart （2）在【app.module.ts】里配置CartServic.
HTML ionic 实现简单购物车 +-数量 选择
遗声落西秦
12-14 1404
input{ text-align: center; } angular.module("myApp", []) .controller("democ", function($scope) { /* 1 创建数据的操作 */ $scope.datas = [{ state: false, head: "htt
ionic购物车
biggrand的博客
11-19 669
<!DOCTYPE html> <html><head> <meta charset="UTF-8"> <title></title> <link href="lib/css/ionic.min.css" rel="stylesheet" /> <script src="lib/js/ionic.bundle.min.js"></script> <style
购物车（ionic）
YHMQ66的博客
11-22 487
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../bao/ionic.css" /> <script type="text/javascript" src="../bao/ion
简单实现IONIC购物车功能
08-31
在本文中，我们将深入探讨如何使用IONIC框架来创建一个简单的购物车功能。IONIC是一个流行的开源框架，用于构建高性能的混合移动应用。通过结合HTML、CSS和JavaScript，我们可以利用IONIC的强大功能来构建用户友好的...
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-bookstore-app
03-04
至于用户体验方面，Ionic的路由系统（基于Angular的路由器）使得页面间的导航变得简单且流畅。通过配置路由规则，开发者可以定义用户如何在不同的书籍详情页、分类页和购物车页面之间切换。 最后，由于Ionic生成的...
ionicShoppingCart:一个简单的ionic 4动画购物车应用程序
05-17
带有动画的离子购物车应用程序 该应用程序为您提供了精美的动画购物车。 目录 入门 Node.js 6或更高版本。 全局安装ionic CLI： npm install -g ionic 克隆此存储库： git clone ...
构建移动电子商务前端：Ionic-Ecommerce项目介绍
Angular提供了一整套功能，包括模板、依赖注入、路由、数据绑定等，使得构建复杂的客户端应用变得简单。 4. Ruby on Rails：这是一个流行的开源Web应用框架，使用Ruby语言编写。Rails遵循“约定优于配置”的原则，...
ionic 购物车商城模板
06-01
ionic 购物车商城模板 原价58元
ionic3 商城+后台demo
07-12
node做的后台，ionic3做的前端，实现了简单商城，包含了常规的购物车，消息推送功能
ionic购物商城demo源码
02-18
简单的一个由ionic开发的商城demo，欢迎多提意见
ionic 商城源码
12-17
ionic 商城源码
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
购物车啊
xxb52306的博客
11-21 252
-->                                        var app = angular.module("myApp", ["ionic"]);             app.controller("myCtrl", function($scope) {                 $scope.items = [{               
ionic 购物车
cdb_680的博客
11-20 255
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 购物车的加减框
丐小胖
12-11 981
关于ionic中的加减框
ionic4.x仿京东 - 10.1.1.购物车-商品属性选择、添加到购物车
ZYYzyy1993的博客
10-10 271
一、商品属性选择 1.【pcontent.page.html】 找到attr这个div，整个用一个div包裹住，命名为myAttr，监听点击事件叫changeAttr($event)，传入事件对象event 2.【pcontent.page.ts】 （1）看看e到底是什么 将e.srcElement打印出来，控制台输出：（获取到当前点击的元素的节点，原生JS） 将e.srcElement.nodeName打印出来，控制台输出：（获取到当前点击的元素的节点的标签名，原生JS）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值