Ionic 简易侧拉框

最新推荐文章于 2023-02-15 10:41:41 发布
最新推荐文章于 2023-02-15 10:41:41 发布
阅读量339 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gorky_19/article/details/78314350
版权
下面代码是用Ionic写的一个简易的侧拉框，希望可以帮助到大家！ 
<!DOCTYPE html>
<html  ng-app="myApp">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link href="ionic/css/ionic.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet"/>
    <script type="text/javascript" src="ionic/js/ionic.bundle.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("myApp",["ionic"]);
        app.config(function($stateProvider,$urlRouterProvider) {
            $stateProvider.state("home",{
                url:"/home",
                views:{
                    "views-home":{
                        templateUrl:"views/home/home.html"
                    }
                }
            }).state("cart",{
                url:"/cart",
                views:{
                    "views-cart":{
                        templateUrl:"views/cart/cart.html"
                    }
                }
            }).state("person",{
                url:"/person",
                views:{
                    "views-person":{
                        templateUrl:"views/mine/mine.html"
                    }
                }
            })
            $urlRouterProvider.otherwise("home");
        });
        app.controller("myCtrl",function($scope,$ionicSideMenuDelegate,$http) {
            $scope.book_list = [];
            $scope.toggleLeft = function() {
               $ionicSideMenuDelegate.toggleLeft();
            };
            var urls = [
                    "",
                    "book_list_1.json",
                    "book_list_2.json",
                    "book_list_3.json",
            ];
               var pageNo = 1;
            var loadDate = function() {
                var httpReq = $http.get(urls[pageNo]);
                httpReq.success(function(data,status){
                    $scope.book_list = $scope.book_list.concat(data);
                }).error(function(data,status){
                    console.log(status);
                }).finally(function(){
                    $scope.$broadcast('scroll.infiniteScrollComplete');
                });
            };
            loadDate();
            $scope.doRefresh = function() {
               $scope.book_list = [];
                pageNo = 1;
                loadDate();
            };
            $scope.loadMore = function() {
                if(pageNo++ > 3) {
                    pageNo = 3;
                    return;
                }
                loadDate();
            };
        });
    </script>
</head>
<body ng-controller="myCtrl">
  <ion-tabs class="tabs-stable tabs-icon-top tabs-striped">
      <ion-tab title="首页" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline" ui-sref="home">
                 <ion-side-menus>
                     <ion-side-menu-content>
                         <ion-header-bar class="bar bar-positive">
                             <button class="button button-icon ion-ios-settings-strong" ng-click="toggleLeft()"></button>
                             <h1 class="title">首页</h1>
                         </ion-header-bar>
                         <ion-nav-view name="views-home"></ion-nav-view>
                    </ion-side-menu-content>
                     <ion-side-menu side="left">
                             <ion-header-bar class="bar bar-positive">
                                 <button class="button button-icon ion-ios-undo-outline" ng-click="toggleLeft()"></button>
                                 <h1 class="title">个人中心</h1>
                             </ion-header-bar>
                             <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-side-menu>
      </ion-side-menus>
      </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="person">
                      <ion-nav-view name="views-person"></ion-nav-view>
                  </ion-tab>
  </ion-tabs>
<script id="home.html" type="text/ng-template">
   <ion-nav-view></ion-nav-view>
</script>
  <script id="cart.html" type="text/ng-template">
      <ion-nav-view></ion-nav-view>
  </script>
  <script id="person.html" type="text/ng-template">
      <ion-nav-view></ion-nav-view>
  </script>
</body>
</html>
开始内联中的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;
}
下面是home.html的布局代码 
<ion-view class="home">
    <ion-content>
        <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>
        <ion-list>
            <ion-item ng-repeat="book in book_list">
                <div class="picture">
                    <img ng-src="{{book.picture}}" width="128px" height="128px"/>
                </div>
                <div class="details">
                    <h2>{{book.title}}</h2>
                    <h3>{{book.description}}</h3>

                    <div>
                        <span>{{ book.price | currency: "￥" }}</span>
                        <i class="icon ion-ios-cart"></i>
                    </div>
                </div>
            </ion-item>
            </ion-list>
        <ion-infinite-scroll on-infinite="loadMore()" distance="1%" immediate-check="false"></ion-infinite-scroll>
    </ion-content>
</ion-view>
下面是cart.html的布局代码 
<ion-view class="cart">
    <ion-header-bar class="bar bar-positive">
        <h1 class="title">购物车</h1>
        <button class="button button-icon ion-ios-undo-outline"></button>
    </ion-header-bar>
    <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="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.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>









Gorky_19
关注
左侧边栏点击不同的item让content显示不同的内容
猪笑了的博客
12-18 1167
var app=angular.module('starter', ['ionic']) .controller("todo",function($scope,$state){ $scope.go = function(az){ $state.go(az); }; }); app.config(function($stateProvider) { $
Android:Ionic框架使用实例
最新发布
偶是不器的博客
02-11 2888
Android:Ionic框架实例
右边菜单侧拉框
weixin_30344131的博客
04-02 323
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/Reset.css"> <link rel="styleshee...
《侧拉框》（实用的方法）
欢迎来到我的博客空间
12-20 446
 主界面函数 package com.example.yuekao02.activity; import android.os.Bundle; import android.support.annotation.NonNull; import android.support.design.widget.TabLayout; import android.support.v4.view.Vie...
大学时期老师讲过的Ionic相关组件复习
雨云21的博客
05-23 468
文章目录1.ionic页面2.ion-list3.ion-card4.复选框5.单选框6.下拉选择7.ion-button8.ion-chip9.圆形组件10.输入组件11.ion-grid栅格化12.ion-icon 参考官网:https://ionicframework.com/docs/components 1.ionic页面 一个ionic页面一般由 头部（header）、内容（content） 和 页脚（footer） 组成 <ion-header> <ion-toolbar
【每日一练】82—CSS实现导航菜单动画效果
web前端开发
10-17 838
导航菜单栏是任何一个开发项目都会有的组件，不管是网页端还是APP端，这个都是不可缺少的一个部分，而一个好用的导航菜单栏，会帮助用户快速找到想要的内容，而一个好看导航菜单栏可以拉长用户的停留时间，我不知道，你是不是有这样的情况，就是看到一些有趣有意思的菜单效果，会不知觉的停下来，去看它的实现效果。其实，用户这样的举动也会间接提高用户转化率，因为用户也会多花点时间去认真了解一下，这个平台上的内容。说了...
ionic 复选框
01-06
ionic 复选框 ionic 复选框（checkbox）与普通的 HTML 复选框没什么区别，以下实例演示了 ionic 复选框 ion-checkbox 的应用。 复选框标签 实例 实例中，会根据复选框是否选中，修改 checked 值，true 为选中， ...
AngularJS之ionic 框架下实现 Localstorage本地存储
12-10
我们前台用的是ionic+AngularJS，做的是混合模式移动应用。最近有一个需求是，我在页面A上面滑动的时候，跳入页面B，页面B需要加载页面A的数据，这样的页面传值如何实现呢？那就需要用到LocalStorage本地存储了。  ...
了解Ionic框架
11-28
Ionic框架是一种先进的开源软件开发工具包，它利用Web技术来构建移动应用。它基于Apache Cordova，是一个完整的前端框架，用于构建跨平台的移动应用。Ionic使用Web技术如HTML、CSS和JavaScript，并利用AngularJS这样...
ionic 滑动框
01-06
ionic 滑动框 ion-slide-box 滑动框是一个包含多页容器的组件，每页滑动或拖动切换： 效果图如下： 用法 BLUE YELLOW PINK API 属性 类型 详情 delegate-handle (可选) 字符串 该句柄用...
ionic各种模板
qq_40087072的博客
10-20 2380
第一个模板 三个页面点击跳转 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=
【每日一练】136—一个侧边栏导航菜单效果的实现
web前端开发
02-15 408
写在前面侧边导航栏在很多后台项目中比较常用，主要是为了方便我们快速找到需要的内容，可以一步到位，因此，今天我们就来练习一个这样的侧边导航栏效果，希望这个效果对你有用，现在，我们一起来看一下它的最终效果：HTML代码：<!DOCTYPE html> <html> <head> <title>【每日一练】136—一个侧边栏导航菜单效果的实现</ti...
ionic中的在线mp3播放功能
Wang的专栏
06-11 2753
前言需要相关说明的，请参考前文效果预览github演示地址 https://github.com/johnnynode/ionic-sample/blob/ionic-v1/mds/audio.md Audio模块中的html关键代码：<ion-view class="audio" cache-view="false"> <ion-header-bar class="bar-stable">
CSS简洁的左侧菜单(侧拉菜单，向右显示)
web开发自学
07-22 968
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;m
ion-view 视图的生命周期及事件集合
u010080803的博客
01-19 1849
ion-view 视图的生命周期及事件集合 一个容器包含内容视图和任何导航以及页眉的信息。当一个视图进入和存在他的父 ionNavView, 该视图同样会发出信息,例如他的标题, 是不是应该存在返回按钮, 是不是相应的 ionNavBar应该存在, 应该用什么样的转场动画, 以及运动的轨迹。 视图被缓存下来来提高性能. 当你跳出一个视图, 他的元素被保存在Dom中并且他的作用范围也不再 $
纯css实现炫酷侧边栏
qq_42586895的博客
02-07 4970
纯css实现炫酷侧边栏 效果展示 网页展示（pc端更佳）：http://www.coolxiang.top/siderbar/ GIF动图效果： html结构 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>侧边栏<...
CSS实战--实现侧边栏滑进滑出
翾的博客
12-10 1万+
效果用的csdn做的例子, 本篇博客主要讲的是侧边栏滑进滑出, 背景是图片……, 不要在意.代码//index.html <!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
Html+CSS+JS实现侧边下拉导航栏（web前端开发基础）
热门推荐
weixin_40841866的博客
10-20 2万+
该代码源自我昨天在B站看的一个视频课（av27073032），造福群众，不喜勿喷。 HTML源代码（建议用Chrome浏览器打开，兼容性强，不易出现乱码现象）： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name=&quot
CSS实现轮播图和侧拉单效果
Chen__sir__的博客
05-01 635
CSS基础，网页设计
精通Ionic框架：构建实时混合移动应用
4. **用户界面设计**：介绍Ionic的UI组件，如侧滑菜单、下拉刷新、模态框和卡片等，以及如何自定义样式，打造吸引人的用户界面。 5. **实时通信**：探讨如何使用WebSocket或其他实时通信技术实现实时更新，创建动态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值