ionic制作小型商城，知识点：侧滑，路由，列表

最新推荐文章于 2021-04-07 13:08:08 发布
最新推荐文章于 2021-04-07 13:08:08 发布
阅读量356 收藏 4
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40040163/article/details/78291271
版权




=========================================================代码区===========================================================

必须添加ionic的数据包

=====================根页代码=index.html=======================

<!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>

==============3个路由页代码===============

=====购物车页=cart.html=====

<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>

========首页=home.html=======

<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>


==========我的页=mine.html=============

<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>


==============================css布局页 main.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;
}

.cart .item {
    border-width: 0;
}

.cart hr {
    border: 1px dotted #999;
    margin-left: 12px;
    margin-right: 12px;
}

.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;
}

===============================侧滑页=sidemenu.html===============================

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>菜鸟教程(runoob.com)</title>
    <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>
    <script type="text/javascript">
        angular.module('starter', ['ionic']);
    </script>

</head>

<body ng-app="starter">
<ion-nav-view></ion-nav-view>

<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-content>
                <ion-list>
                    <ion-item>abc</ion-item>
                    <ion-item>def</ion-item>
                </ion-list>
            </ion-content>

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

    <ion-side-menu side="left">

        <header class="bar bar-header bar-stable">
            <h1 class="title">Left</h1>
        </header>

        <ion-content class="has-header">
            <ion-list>
                <ion-item nav-clear menu-close href="#/app/search">
                    Left1111
                </ion-item>
                <ion-item nav-clear menu-close href="#/app/browse">
                    Left2222
                </ion-item>
                <ion-item nav-clear menu-close href="#/app/playlists">
                    Left333
                </ion-item>
            </ion-list>
        </ion-content>

    </ion-side-menu>
</ion-side-menus>

</body>
</html>


天生犯二
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
毕业设计商城app源码-sm-coal-app:这是一个使用Ionic2开发的集数据展示，交易，交流于一体的APP
06-06
毕业设计商城app源码 初衷 跳槽以后来到了新的公司，新的项目，每天朝九晚五，终于摆脱了以前朝九晚九的加班生活，谁说程序员就必须加班了，感觉自己作息也变得正常了起来。 空余出的大段时间拿来干什么呢？闲不住的小少年就想着自己做个啥，嗯，做个APP吧，毕竟PC已经是上个时代的事情了，人工智能AI、大数据啥的咱也不懂，又作为一只喜欢抢热点的全站攻城狮，就自己动手撸前后台代码搞一个APP吧，没事装在手机里玩儿也可以装装逼嘛是吧。 说干就干，做个啥APP呢？又把我难住了，出师未捷身先死呀，人类的大部分行动都倒在了第一步，不行，必须想出来。嗯，突然想起来前一段时间有朋友找我想做一个煤炭物流APP，说你不是会写代码吗，给我搞一个APP呗，我流着泪在半夜12点回过去消息说，哥，我才下班，你看能行不。现在有时间了呀，煤炭+物流，符合地方特色，就这样定了。 然后就是蒙头撸代码，中间暂时省略10w字，反正一个月以后做完了。不瞎比比了，先上图再说。 二级页面就不做展示了，总之自我感觉还是肥肠的丰满啦（自信脸）。 技术准备 虽然任何开发的第一步都是可行性分析和设计，但是鉴于讲起来太庞杂，也不符合这次分享的主题，
ionic4.x-京东商城
神zhi殇的博客
10-14 804
功能： 首页、分类、购物车、我的 搭建项目，增加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
ionic3 php 电商视频,ionic3仿京东商城源码
weixin_39632698的博客
04-07 423
【实例简介】ionic3仿京东商城源码,非常好用的ionic3学习参考资料。【实例截图】【核心代码】ionic3仿京东商城源码├── README.md├── config.xml├── hooks│ └── README.md├── ionic.config.json├── package.json├── platforms│ ├── android│ │ ├── Android...
ionic3项目实战教程 - 第4讲 ionic3商城首页设计(幻灯片+图标分类)
weixin_34150224的博客
08-20 236
商城首页主要包含以下几个部分 1.使用ion-slide实现首页幻灯片； 2.使用ion-grid实现商品分类； 3.使用ion-list实现商品列表； 说一下实现思路 1.先获取网络请求的数据，查看数据结构； 2.根据数据结构来判断需要展示的数据，编写html； 3.调整界面样式，编写scss； 准...
ionic2开发的仿外卖点餐系统(Ionic2+Angular2...包含CSS3飞入购物车效果和各种组件用法)
jiangwenhab的博客
03-04 5981
Run this Project（运行该项目） first（首先）: make sure your computer install ionic  确保你的电脑安装了ionic2,不懂自行百度 second（其次）: $ ionic start wechat_restaurant tutorial --v2 third（然后）: find local fi
ionic2写的社区超市App
12-24
用ionic2,angular2和typeScript写的社区商店手机app，包括百度地图的调用，当前位置的获取，经纬度的计算等。因为大小的限制，只能上传src文件夹，在本地新建一个ionic2项目，把src文件夹替换就可以运行。
ionic3/ag4编写模仿京东商城的demo
热门推荐
Jack_King007的专栏
05-16 1万+
ionic3angular4JD使用1.cnpm install或者使用npm install2.ionic serve3有需要使用android/ios平台 ionic platform add ios/android 4运行android/ios平台 ionic run android/ios 5.预览界面 6.可预览android版本apk 点击下载apk 7.源码查看 点击打开代码地址8
ionic2+angular2+cordova开发Hybird电商app示例
12-03 4997
ionic 2目前已经更新至rc.3版本，相较ionic 1基于angularjs，2.0版本基于google最新推出的angular 2 , 使用typescript。近日用ionic2做了一个商城demo，分别测试了wap、ios和android。华为自带浏览器和手机QQ浏览器布局问题比较严重，打包成ios和android应用体验比较流畅，这次写的demo只做了一个http请求，其他都是本地测...
ionic购物商城demo源码
02-18
简单的一个由ionic开发的商城demo，欢迎多提意见
Ionic-Legacy-HerokuApp:离子Heroku
05-15
遗留离子heroku 这是用于Heroku部署的Ionic 3的已构建项目。关联
ionic3仿京东商城源码
03-29
ionic3仿京东商城源码,非常好用的ionic3学习参考资料。
ionic 购物车商城模板
06-01
ionic 购物车商城模板 原价58元
ionic 商城源码
12-17
ionic 商城源码
ionic side menu侧滑效果
04-03
ionic side menu侧滑效果demo
ionic侧边栏菜单模板APP
06-27
使用ionic框架构建的具有侧边栏菜单的应用程序模板APP
Ionic3-D3-Chart:Ionic3 D3.js
05-15
离子3-d3-图 这是一个离子3 + d3图表应用程序。 Android APK链接
ionic_login_demo:ionic制作的loginlogoutsignup演示
05-30
ionic_login_demo ionic 制作的登录/注销/注册演示
ionic 列表
01-06
ionic 列表 列表是一个应用广泛的界面元素，在所有移动app中几乎都会使用到。 列表可以是基本文字、按钮，开关，图标和缩略图等。 列表项可以是任何的HTML元素。容器元素需要list类，每个列表项需要使用item类。 ...
ionic2-reddit-reader：Ionic 2示例应用程序
01-30
Ionic 2 Reddit阅读器 适用于Android和iOS的阅读器，由制成 产品特点 浏览热点 浏览子目录 阅读评论 无尽滚动 跑步 克隆此存储库。 从项目根目录运行npm install 安装离子CLI（ npm install -g ionic ） 从项目根...
@ionic/cli 支持"type": "ionic-angular
最新发布
08-31
是的，@ionic/cli 支持 "type": "ionic-angular"。这是用于指定 Ionic 项目的类型为 Ionic Angular 的配置选项。通过设置这个选项，@ionic/cli 将会使用 Angular 框架作为 Ionic 项目的基础。这意味着你可以使用 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值