ionic之购物书城

最新推荐文章于 2020-10-14 21:42:23 发布
最新推荐文章于 2020-10-14 21:42:23 发布
阅读量395 收藏 1
点赞数
分类专栏： ionic
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sakeji_13/article/details/78292992
版权 
<!主页面>

<!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="lib/ionic/css/ionic.css" rel="stylesheet"/>
    <script type="text/javascript" src="lib/ionic/js/ionic.bundle.js"></script>
    <link href="css/main.css" rel="stylesheet"/>
    <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: "views/home/home.html",
                        controller: "HomeCtrl"
                    }
                }
            }).state("cart", {
                url: "/cart",
                views: {
                    "view-cart": {
                        templateUrl: "views/cart/cart.html",
                    }
                }
            }).state("mine", {
                url: "/mine",
                views: {
                    "view-mine": {
                        templateUrl: "views/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-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>

<!home页面>

<ion-view title="首页" class="home">
    <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 ng-src="img/book_01.jpg" width="128px" height="128px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>C++、Java中的圣经级著作</h3>

                    <div>
                        <span>{{ 86.40 | currency: "￥" }}</span>
                        <i class="icon ion-ios-cart"></i>
                    </div>
                </div>
            </ion-item>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>C++、Java中的圣经级著作</h3>

                    <div>
                        <span>{{ 86.40 | currency: "￥" }}</span>
                        <i class="icon ion-ios-cart"></i>
                    </div>
                </div>
            </ion-item>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>C++、Java中的圣经级著作</h3>

                    <div>
                        <span>{{ 86.40 | currency: "￥" }}</span>
                        <i class="icon ion-ios-cart"></i>
                    </div>
                </div>
            </ion-item>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>C++、Java中的圣经级著作</h3>

                    <div>
                        <span>{{ 86.40 | currency: "￥" }}</span>
                        <i class="icon ion-ios-cart"></i>
                    </div>
                </div>
            </ion-item>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>C++、Java中的圣经级著作</h3>

                    <div>
                        <span>{{ 86.40 | currency: "￥" }}</span>
                        <i class="icon ion-ios-cart"></i>
                    </div>
                </div>
            </ion-item>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="128px" height="128px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>
                    <h3>C++、Java中的圣经级著作</h3>

                    <div>
                        <span>{{ 86.40 | currency: "￥" }}</span>
                        <i class="icon ion-ios-cart"></i>
                    </div>
                </div>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

<!cart页面>

<ion-view title="购物车" class="cart">
    <ion-content>
        <ion-list>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="96px" height="96px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>

                    <h3>{{ 86.40 | 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>
            <hr>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="96px" height="96px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>

                    <h3>{{ 86.40 | 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>
            <hr>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="96px" height="96px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>

                    <h3>{{ 86.40 | 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>
            <hr>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="96px" height="96px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>

                    <h3>{{ 86.40 | 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>
            <hr>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="96px" height="96px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>

                    <h3>{{ 86.40 | 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>
            <hr>
            <ion-item>
                <div class="picture">
                    <img ng-src="img/book_01.jpg" width="96px" height="96px"/>
                </div>
                <div class="details">
                    <h2>Java编程思想</h2>

                    <h3>{{ 86.40 | 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>

<!mine页面>

<ion-view title="个人中心" class="mine">
    <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>


<!简单ionic路由>

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
    <title>路由-标签切换</title>
    <script type="text/javascript">
        var app = angular.module("myApp", ["ionic"]);

        app.config(function ($stateProvider, $urlRouterProvider) {
            $stateProvider.state("home", {
                url: "/home",
                views: {
                    "views-home": {
                        templateUrl: "home.html"
                    }
                }
            }).state("cart", {
                url: "/cart",
                views: {
                    "views-cart": {
                        templateUrl: "cart.html"
                    }
                }
            }).state("mine", {
                url: "/mine",
                views: {
                    "views-mine": {
                        templateUrl: "mine.html"
                    }
                }
            })
        });
    </script>
</head>
<body>
<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="views-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="views-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="views-mine"></ion-nav-view>
    </ion-tab>
</ion-tabs>

<script id="home.html" type="text/ng-template">
    这是“首页”页面HTML内容
</script>

<script id="cart.html" type="text/ng-template">
    这是“购物车”页面HTML内容
</script>

<script id="mine.html" type="text/ng-template">
    这是“我的”页面HTML内容
</script>
</body>
</html>


SackJe_13
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ionic入门教程第十三课-多级分类列表的简单实现
https://github.com/xiaohuoni
04-27 4674
今天给大家讲一个很简单实用的多级分类列表， 一样的也是今天一个朋友问我的问题。 大概的需求是这个样子的，要做一个三级分类的页面。 下面来说一下思路吧！ 先获取一级分类的数据，然后通过遍历得到头部的1级页面内容。 然后取第一个数据，获取他的二级页面的数据，还是通过遍历得到左边2级页面的内容。 再去2级页面的第一个数据，获取它的三级页面的数据，通过遍历绘制。 由于我没有写服务端，
ionic 购物车商城模板
06-01
ionic 购物车商城模板 原价58元
ionic4.x-京东商城
神zhi殇的博客
10-14 830
功能： 首页、分类、购物车、我的 搭建项目，增加tab4，并修改tab样式 ionic start jdshop tabs // 搭建项目 ionic g page tab4 // 第四个tab页面 添加上tab4，然后修改tab的文字和icon。 home、 ios-apps、 ios-cart、 contacts 修改tab的颜色： 1.使用自定义主题色的方法，并没有改变tab的选中颜色，所以不行。 2.修改某一类组件的颜色（ion-tab-button）。css properties .ion-c
ionic 模板
07-29
由于最近研究ionic框架，深感这块的Demo寥寥可数，而大家又都藏私，堂堂天朝，何时才有百家争鸣之象，开源精神吾辈当仁不让！
ionic应用实用模板
12-17
基于ionic tabs模板应用修改而来 更符合实际业务需求
ionic 路由模板
下午茶的博客
10-20 460
向上图：  主要实现的效果如下 直接写个模板方面日后用： html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> meta name="viewport" content="width=device-width,minimum-scale=1.0,ma
ionic购物商城demo源码
02-18
简单的一个由ionic开发的商城demo，欢迎多提意见
使用ionic开发移动app的过程中经验总结
changcongying的博客
09-22 5705
最近在使用ionic开发几个移动端的模块，使用过程中积累一些经验，在此总结下，以供参考。后续开发过程中如果有其他问题，会随时补充。 这些问题经过归纳总结分为以下几大类： html angularJs ionic android html类问题 在ios系统上，有些链接会被当作电话号码来处理，默认显示成蓝色可点击样式，添加以下meta可以解决此问题： <meta name="format-dete
ReactNative+Node.js+AngularJS+Bootstrap实现基于JS的网上书城APP
攻城诗的酸甜苦辣
05-29 681
这是毕设做的项目，时间不够主要是在用RN做移动端的应用。现在有时间重新整理一下，然后把web端的后台管理系统也做一下，web端的后台管理系统主要用Node.js+AngularJS+Bootstrap来实现，会继续沿用当初做的部分，然后改善~ 源码地址：https://github.com/Orangetsss/WBS 下面贴上几张效果图（自己随便做的效果~美观度emm…将就着看）： ...
html_ionic选项卡切换
Android___vv的博客
10-20 1171
路由-标签切换             var app = angular.module("myApp", ["ionic"]);         app.config(function ($stateProvider, $urlRouterProvider) {             $stateProvider.state("home", {
ionic搭建应用模板框架
ioniconline的博客
12-03 4909
您可自由转发此文， 但请保留出处：Ionic在线学习网站  http://www.ioniconline.com 环境搭建完，对ionic基本了解后，我们来搭个实用的应用框架。ionic提供了三个最常用的示例框架。方便你快速的进入项目开发。 如：sudo ionic start appname blank（sidemenu／tabs） 我们这边从一个空模版来建立应用，这样我们能够从零开始深刻
HTML ionic 实现简单购物车 +-数量 选择
遗声落西秦
12-14 1214
input{ text-align: center; } angular.module("myApp", []) .controller("democ", function($scope) { /* 1 创建数据的操作 */ $scope.datas = [{ state: false, head: "htt
ionic列表模板
nick_king的博客
03-27 765
ionic动态列表模板 话不多说，先看效果图片 自我感觉还是不错的，你们觉得呢，这里我用到了ionic的card组件，一个动态就是一个card，说实话把，我也是直接抄的官网的栗子：传送门，我只是在这个基础上添加了一个删除，实现了点赞，评论等功能，先贴代码吧： <ion-header> <ion-navbar color="primary"> <ion-t...
ionic静态购物车实现
xy8199的博客
10-19 1438
前几篇对ionic进行了初步的了解，接下来我们要在实战中进行操作，对所学知识进行拼凑，达到真正的灵活运用。接下来我们做一个小demo，一个静态的购物车。 例图效果： 源码： index.html html> html ng-app="BShop"> head> meta charset="UTF-8"> meta name="viewport" co
ionic购物车框架模板
xy8199的博客
10-20 1079
html> html ng-app="myApp"> head> meta charset="UTF-8"> meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> link href="https://cdn.bootcss
购物车（ionic）
YHMQ66的博客
11-22 433
<!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各种模板
qq_40087072的博客
10-20 2354
第一个模板 三个页面点击跳转 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=
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值