ionic 侧滑+无限轮播+信息展示+头部底部

最新推荐文章于 2021-09-14 08:28:08 发布
置顶 最新推荐文章于 2021-09-14 08:28:08 发布
阅读量456 收藏
点赞数
分类专栏： ionic
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39493777/article/details/78027345
版权
本文介绍如何在 Ionic 应用中实现侧滑菜单、无限轮播图以及信息展示功能。通过这些组件，可以创建一个功能丰富的主页，提供流畅的用户体验。
摘要由CSDN通过智能技术生成

主页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="../lib/css/ionic.min.css">
    <script src="../lib/js/ionic.bundle.min.js"></script>
    <style>
        *{
            margin:0;
            padding:0;
        }
        img{
            width:100%;
            height: auto;
        }
        .slider-pager .slider-pager-page.active{
            color: white;
        }
        .tou{
            width: auto;
            height: 100%;
        }
        ion-list ion-item p{
            width: 100%;
            height: 30px;
            line-height: 40px;
        }
        ion-list ion-item p img{
            width: auto;
            height: 25px;
            line-height: 40px;
            padding-right:10px;

        }
    </style>
    <script>
        var my=angular.module("my",["ionic"]);
        my.controller("mys",function ($scope, $http,$ionicSideMenuDelegate) {
            $http({
                url:"data.json"
            }).then(function (data) {
                $scope.data=data.data
            })
            $scope.doRefresh = function() {
                $http.get('data.json')
                    .success(function(newItems) {
                        $scope.data = newItems;
                    })
                    .finally(function() {
                        // 停止广播ion-refresher
                        $scope.$broadcast('scroll.refreshComplete');
                    });
            };
            /*上拉加载*/
            $scope.loadMore = function() {
                $http.get('data.json').success(function(data) {
                    Array.prototype.push.apply($scope.data,data);
                    $scope.$broadcast('scroll.infiniteScrollComplete');
                });
            };
            $scope.$on('stateChangeSuccess', function() {
                $scope.loadMore();
            });
            $scope.toggleLeft = function() {
                $ionicSideMenuDelegate.toggleLeft();
            };
        })
    </script>
</head>
<body ng-app="my" ng-controller="mys">
<ion-side-menus>
    <!-- 中间内容 -->
    <ion-side-menu-content>
        <ion-tabs class="tabs-positive tabs-icon-top">

            <ion-tab title="首页" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
                <!-- 标签 1 内容 -->
                <ion-header-bar align-title="center" class="bar-positive">
                    <div class="buttons">
                        <button class="button" ng-click="doSomething()">左侧按钮</button>
                    </div>
                    <h1 class="title">飞鸟社</h1>
                    <div class="buttons">
                        <button class="button">右侧按钮</button>
                    </div>
                </ion-header-bar>
                <ion-content>
                    <ion-slide-box auto-play="true" does-continue="true" slide-interval="1000">
                        <ion-slide>
                            <div class="box blue"><img src="../img/community_06.jpg" height="380" width="750"/></div>
                        </ion-slide>
                        <ion-slide>
                            <div class="box yellow"><img src="../img/community_04.jpg" height="380" width="750"/></div>
                        </ion-slide>
                        <ion-slide on-slide-changed="slideHasChanged(index)">
                            <div class="box pink"><img src="../img/community_02.jpg" height="380" width="750"/></div>
                        </ion-slide>
                    </ion-slide-box>
                    <ion-refresher
                            pulling-text="下拉刷新..."
                            on-refresh="doRefresh()">
                    </ion-refresher>
                    <ion-list>
                        <ion-item ng-repeat="item in data">
                            <h2>{{item.title}}</h2>
                            <img src="{{item.pic}}">
                            <p>{{item.text}}</p>
                        </ion-item>
                    </ion-list>
                    <ion-infinite-scroll
                            on-infinite="loadMore()"
                            distance="0%">
                    </ion-infinite-scroll>
                </ion-content>

            </ion-tab>

            <ion-tab title="关于" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
                <!-- 标签 2 内容 -->
                <p>第二个</p>
            </ion-tab>

            <ion-tab title="设置" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
                <!-- 标签 3 内容 -->
                <p>第三个</p>
            </ion-tab>

        </ion-tabs>
    </ion-side-menu-content>

    <!-- 左侧菜单 -->
    <ion-side-menu side="left">
        <ion-header-bar align-title="center" class="bar-positive">
            <img src="../img/p03.png" class="tou">
            <h1 class="title">信息</h1>
        </ion-header-bar>
        <ion-content>
            <ion-list>
                <ion-item>
                    <p><img src="../png/512/QQ1.png">{{"我的超级会员"}}</p>
                </ion-item>
                <ion-item>
                    <p><img src="../png/512/QQ1.png">{{"QQ钱包"}}</p>
                </ion-item>
                <ion-item>
                    <p><img src="../png/512/QQ1.png">{{"个性装扮"}}</p>
                </ion-item>
                <ion-item>
                    <p><img src="../png/512/QQ1.png">{{"我的收藏"}}</p>
                </ion-item>
                <ion-item>
                    <p><img src="../png/512/QQ1.png">{{"我的相册"}}</p>
                </ion-item>
                <ion-item>
                    <p><img src="../png/512/QQ1.png">{{"我的文件"}}</p>
                </ion-item>
                <ion-item>
                    <p><img src="../png/512/QQ1.png">{{"免流量特权"}}</p>
                </ion-item>
            </ion-list>

        </ion-content>
    </ion-side-menu>

    <!-- 右侧菜单 -->
    <ion-side-menu side="right">
    </ion-side-menu>
</ion-side-menus>
</body>
</html>
侧滑页

  
  

   
   
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="../lib/css/ionic.min.css">
    <script src="../lib/js/ionic.bundle.min.js"></script>
    <style>
        .tou{
            width: auto;
            height: 100%;
        }
        ion-list ion-item p{
            width: 100%;
            height: 30px;
            line-height: 40px;
        }
        ion-list ion-item p img{
            width: auto;
            height: 25px;
            line-height: 40px;
            padding-right:10px;
            
        }
    </style>
    <script>
        var my=angular.module("my",["ionic"]);
        my.controller("ContentController",function ($scope, $ionicSideMenuDelegate) {
                $scope.toggleLeft = function() {
                    $ionicSideMenuDelegate.toggleLeft();
                };

        });

    </script>
</head>
<body ng-app="my">
<ion-side-menus>
    <!-- 中间内容 -->
    <ion-side-menu-content ng-controller="ContentController">

    </ion-side-menu-content>

    <!-- 左侧菜单 -->
    <ion-side-menu side="left">
        <ion-header-bar align-title="center" class="bar-positive">
            <img src="../img/p03.png" class="tou">
            <h1 class="title">信息</h1>
        </ion-header-bar>
        <ion-content>
            <ion-list>
                <ion-item>
                    <p><img src="../png/512/QQ1.png">{{"我的超级会员"}}</p>
                </ion-item>
                <ion-item>
                    <p><img src="../png/512/QQ1.png">{{"QQ钱包"}}</p>
                </ion-item>
                <ion-item>
                    <p><img src="../png/512/QQ1.png">{{"个性装扮"}}</p>
                </ion-item>
                <ion-item>
                    <p><img src="../png/512/QQ1.png">{{"我的收藏"}}</p>
                </ion-item>
                <ion-item>
                    <p><img src="../png/512/QQ1.png">{{"我的相册"}}</p>
                </ion-item>
                <ion-item>
                    <p><img src="../png/512/QQ1.png">{{"我的文件"}}</p>
                </ion-item>
                <ion-item>
                    <p><img src="../png/512/QQ1.png">{{"免流量特权"}}</p>
                </ion-item>
            </ion-list>
            
        </ion-content>
    </ion-side-menu>

    <!-- 右侧菜单 -->
    <ion-side-menu side="right">
    </ion-side-menu>
</ion-side-menus>
</body>
</html>


赛 文
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
混合开发Ionic+angular快速开发App
qq_33703512的博客
06-21 6703
对于新入门的移动开发者而言，摆在面前的移动应用开发有三种口味 Native App： 本地应用程序（原生App） Web App：网页应用程序（移动web） Hybrid App：混合应用程序（混合App） Hybrid App兼具了Native App良好用户体验的优势，也兼具了Web App使用HTML5跨平台开发低成本的优势。目前已经有众多Hybrid App开发成功应用，比如美团、爱奇艺、...
ionic5+capacitor+angular
学无止境! 无休无止!
03-25 3294
ionic更新到5之后。创建项目会默认使用capacitor容器。是ionic自己开发的一套类似cordova的东西。使用起来也比较简单。慢慢的会替代cordova，变成自己的东西吧。 之前使用的是ioniccordova来操作 现在使用npx cap来操作 安装ionic npm install -g ionic 创建项目 ionic start capApp ta...
Ionic2 slides的使用
张伟array[0]的博客
03-31 6191
<ion-slides pager> <ion-slide style="background-color: green"> <h2>Slide 1</h2> </ion-slide> <ion-slide style="background-color: blue"> <h2>Slide 2</h2> </ion-slide> <ion-slide style="ba
ionic header和subheader头部指令
黄彪博客
09-07 1238
http://www.ionic.wang/js_doc-index-id-21.html 如果应用'bar-subheader'类，就可以成为一个subheader   选择小区 .hb.bar .button.button-clear .icon::before, .hb.bar .button.butto
ionic+做一个侧滑跳转+标题头旁边有一个后退功能的按钮
dangai0201的博客
09-15 750
html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> title>Titletitle> link href="li
ionic3-menuToggle侧菜单
5big的博客
01-25 3667
ionic3实现侧菜单与ionic1不同。用的是menuToggle控件。 官方参考文档实例：https://github.com/ionic-team/ionic-preview-app/blob/master/src/pages/menus/basic/pages.ts 可以使用命令：ionic start test sidemenu 来建一个带侧菜单的demo。 文件结构 实例
Ionic+Angular移动应用程序开发
weixin_43862492的博客
08-16 1058
angular+ionic移动应用程序开发
Ionic+Angular实现自动轮播功能
weixin_44794123的博客
07-06 391
Ionic+Angular实现自动轮播功能 html页面 <section class="shop-swipe" > <ion-slides pager="true" loop="true" speed="5000" pager="true" autoplay="true" spaceBetween="0" direction="vertical" effect="slide" zoom="true" #slide> <ion-slide *
Ionic5+Angular9+Cordova混合开发
Downsiren的博客
10-26 1150
记录下自己的学习路线，仅供参考 环境搭建 有很多大佬介绍了如何安装环境，可以看这里 ionic5+angular8混合移动开发（一）——环境搭建 基于ionic4、cordova搭建android开发环境 ionic+angular+cordova 安卓环境搭建 理解 ionic 、 angular 和cordova之间的关系 理解Ionic、Angular、Cordova及插件之间的关系 Ang...
解决ionic5+angular启动页后白屏
baidu_37332423的博客
09-14 1166
效果 修改前 修改后 原因分析 ionic5+Angular在启动页后出现一段时间的白屏，是因为MainActivity继承自BridgeActivity 而BridgeActivity.java的bridge_layout_main.xml使用了webview，在加载App页面的过程中，显示背景色白色，导致白屏显示。 所以修改webview的背景色为透明，即可解决白屏现象。 ...
基于vue3+ionic6+capacitor的图书借阅app
06-30
这套系统采用vue+ionic+capacitor框架，是一套基于vue和ionic的入门系统，虽然是入门，但所用到的技术绝对是当今主流，后台依然采用《图书管理系统》的后台，没有任何变化。 本资源包包含：图书借阅app的vue源码、...
Ionic + Angular.js实现图片轮播的方法示例
10-19
在移动应用开发中，图片轮播是一个非常常见的功能，它能有效地展示多张图片或信息。本文将介绍如何使用Ionic框架结合Angular.js实现一个图片轮播功能。Ionic是一款基于Angular.js构建混合移动应用的框架，它提供了...
Ionic-CoreData:Ionic 3 + Angular 4 + RESTful API
05-15
在ionic2-starter-之后ionic2-starter-名称，这是在使用以下ionic start命令时要使用的模板的名称： $ sudo npm install -g ionic cordova $ ionic start mySideMenu sidemenu 然后，要运行它， mySideMenu cd...
2024-2030全球与中国硅胶婴儿用品市场现状及未来发展趋势 Sample-Li Jinpan.pdf
09-05
QYResearch是全球知名的大型咨询公司，行业涵盖各高科技行业产业链细分市场，横跨如半导体产业链（半导体设备及零部件、半导体材料、集成电路、制造、封测、分立器件、传感器、光电器件）、光伏产业链（设备、硅料/硅片、电池片、组件、辅料支架、逆变器、电站终端）、新能源汽车产业链（动力电池及材料、电驱电控、汽车半导体/电子、整车、充电桩）、通信产业链（通信系统设备、终端设备、电子元器件、射频前端、光模块、4G/5G/6G、宽带、IoT、数字经济、AI）、先进材料产业链（金属材料、高分子材料、陶瓷材料、纳米材料等）、机械制造产业链（数控机床、工程机械、电气机械、3C自动化、工业机器人、激光、工控、无人机）、食品药品、医疗器械、农业等。
用于非线性模型预测控制 (NMPC) 的并行优化工具包.7z
09-05
用于非线性模型预测控制 (NMPC) 的并行优化工具包.7z
Flow-Guided-Feature-Aggregation研究基于视频的目标检测FGFA框架.zip
最新发布
09-05
目标检测（Object Detection）是计算机视觉领域的一个核心问题，其主要任务是找出图像中所有感兴趣的目标（物体），并确定它们的类别和位置。以下是对目标检测的详细阐述： 一、基本概念 目标检测的任务是解决“在哪里？是什么？”的问题，即定位出图像中目标的位置并识别出目标的类别。由于各类物体具有不同的外观、形状和姿态，加上成像时光照、遮挡等因素的干扰，目标检测一直是计算机视觉领域最具挑战性的任务之一。 二、核心问题 目标检测涉及以下几个核心问题： 分类问题：判断图像中的目标属于哪个类别。 定位问题：确定目标在图像中的具体位置。 大小问题：目标可能具有不同的大小。 形状问题：目标可能具有不同的形状。 三、算法分类 基于深度学习的目标检测算法主要分为两大类： Two-stage算法：先进行区域生成（Region Proposal），生成有可能包含待检物体的预选框（Region Proposal），再通过卷积神经网络进行样本分类。常见的Two-stage算法包括R-CNN、Fast R-CNN、Faster R-CNN等。 One-stage算法：不用生成区域提议，直接在网络中提取特征来预测物体分类和位置。常见的One-stage算法包括YOLO系列（YOLOv1、YOLOv2、YOLOv3、YOLOv4、YOLOv5等）、SSD和RetinaNet等。 四、算法原理 以YOLO系列为例，YOLO将目标检测视为回归问题，将输入图像一次性划分为多个区域，直接在输出层预测边界框和类别概率。YOLO采用卷积网络来提取特征，使用全连接层来得到预测值。其网络结构通常包含多个卷积层和全连接层，通过卷积层提取图像特征，通过全连接层输出预测结果。 五、应用领域 目标检测技术已经广泛应用于各个领域，为人们的生活带来了极大的便利。以下是一些主要的应用领域： 安全监控：在商场、银行
习题集计算机原理习题集
09-05
【习题集】计算机原理习题集 计算机原理习题集 习题 一 1．微型计算机的发展经历了哪几个时代？每个时代有哪些主要特点？ 2．简述Pentium4 微处理器的处理能力。 3．冯·诺依曼计算机的结构特点是什么？ 4．典型微机有哪三大总线？它们传送的是什么信息？ 5．什么叫微处理器？什么叫微型计算机？什么叫微型计算机系统？这三者有什么区别和联系？ 6．微处理器内部一般由哪些部分组成？各部分的主要功能是什么？ 7．试用示意图说明内存单元的地址和内存单元的内容，二者有何联系和区别？ 8．高级语言、汇编语言、机器语言有何区别？各有何特点？ 9．评价微型计算机性能的主要指标有哪些？试举例说明现在市场主流机型微型计算机的性能参数。 10．现代微型计算机的主板通常由哪些部分组成？主板上的总线扩展插槽有何用途？ 习题 二 1．8086CPU从功能上分为哪两个工作部件？每个工作部件的功能、组成和特点分别是什么？ 2．8086CPU中有几个通用寄存器，有几个变址寄存器，有几个地址指针寄存器？它们中通常哪几个寄存器可作为地址寄存器使用？ 3．8086CPU的标志寄存器中有哪些标志位？它们的含义和作用是什么？
基于Spring Boot框架的尚融宝网络借贷平台.zip
09-05
基于Spring Boot框架的尚融宝网络借贷平台 项目介绍 尚融宝是一个网络借贷信息中介服务平台，致力为高成长人群提供专业的线上信贷及出借撮合服务。行业案例包括人人贷、拍拍贷等。 技术架构 前端 Node.js: Js运行环境 ES6: Js模块化版本 Axios: Ajax请求工具 Vue.js: 前端框架 ElementUI: 前端组件库 Vueelementadmin: 后台管理系统UI集成方案 NuxtJS: 前端服务器 后端 SpringBoot: 微服务开发框架 SpringCloud: 微服务组件库 SpringCloud Alibaba: 阿里微服务组件库 MyBatis Plus: 持久层框架 Swagger2: API接口文档生成工具 LogBack: 日志系统 alibabaeasyExcel: Excel读写框架 Redis: 缓存中间件 MySQL: 关系型数据库 SpringTask: 定时任务 RabbitMQ: 消息中间件 项目结构 前端 srbadmin: 管理平台 srbsi
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值