AngularJS的ionic（侧拉、选项卡、list展示、上拉加载、下拉刷新）

最新推荐文章于 2023-05-22 10:54:19 发布
最新推荐文章于 2023-05-22 10:54:19 发布
阅读量854 收藏 1
点赞数
分类专栏： Angularjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SXS120730/article/details/78277177
版权 
<!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">
    <script src="../lib/js/ionic.bundle.min.js"></script>
    <link rel="stylesheet" href="../lib/css/ionic.css">
    <style>
        img{
            width: 100%;
            height:250px;
        }
    </style>
    <script>
        var myapp=angular.module("myapp",["ionic"]);
         myapp.controller("myCtrl",function ($scope,$http,$ionicSideMenuDelegate) {
             $http({
                 url:"data.json",
                 method:"GET"
             }).then(function (aa) {
                 $scope.items=aa.data;
             })
             /*刷新*/
             $scope.doRefresh = function() {
                 $http.get('data,json')
                     .success(function(newItems) {
                         $scope.items = newItems.data;
                     })
                     .finally(function() {
                         // 停止广播ion-refresher
                         $scope.$broadcast('scroll.refreshComplete');
                     });
             };
             /*加载*/
             $scope.loadMore = function() {
                 $http.get('data.json').success(function(items) {
                    Array.prototype.push.apply($scope.items,items);
                     $scope.$broadcast('scroll.infiniteScrollComplete');
                 });
             };

             $scope.$on('stateChangeSuccess', function() {
                 $scope.loadMore();
             });

             /*侧拉*/
             $scope.toggleLeft = function() {
                 $ionicSideMenuDelegate.toggleLeft();
             };
         });
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">

<!--侧拉菜单-->
<ion-side-menus>
    <!-- 中间内容 -->
    <ion-side-menu-content>
        <!--导航栏（选项卡）-->
        <ion-tabs class="tabs-positive tabs-icon-top">

            <ion-tab title="首页" icon-on="ion-home" icon-off="ion-ios-filing-outline">
                <!--页眉-->
                <ion-header-bar align-title="center" class="bar-positive">
                    <div class="buttons">
                        <button class="button" ng-click="toggleLeft()"><span class="ion ion-chevron-left"></span></button>
                    </div>
                    <h1 class="title">淘宝</h1>
                    <div class="buttons">
                        <button class="button"><span class="ion ion-ios-keypad-outline"></span></button>
                    </div>
                </ion-header-bar>
                <ion-content>
                    <!--图片的轮播-->
                    <ion-slide-box auto-play="true" slide-interval="1000" does-continue="true">
                        <ion-slide>
                            <div class="box blue"><img src="images/a.JPG" height="260" width="195"/></div>
                        </ion-slide>
                        <ion-slide>
                            <div class="box yellow"><img src="images/b.JPG" height="260" width="195"/></div>
                        </ion-slide>
                        <ion-slide on-slide-changed="slideHasChanged(index)">
                            <div class="box pink"><img src="images/c.JPG" height="260" width="195"/></div>
                        </ion-slide>
                        <ion-slide>
                            <div class="box blue"><img src="images/d.JPG" height="195" width="260"/></div>
                        </ion-slide>
                        <ion-slide>
                            <div class="box yellow"><img src="images/e.JPG" height="260" width="195"/></div>
                        </ion-slide>
                        <ion-slide on-slide-changed="slideHasChanged(index)">
                            <div class="box pink"><img src="images/f.JPG" height="270" width="360"/></div>
                        </ion-slide>
                    </ion-slide-box>

                    <!--下拉刷新-->
                    <ion-refresher
                            pulling-text="下拉刷新..."
                            on-refresh="doRefresh()">
                    </ion-refresher>
                    <ion-list>
                        <ion-item ng-repeat="item in items">
                            <p>{{item.text}}</p>
                            <img ng-src="{{item.pic}}">
                        </ion-item>
                    </ion-list>


                    <!--listview的展示-->
                    <ion-list>
                        <ion-item ng-repeat="item in items">
                            <p>{{item.text}}</p>
                            <img ng-src="{{item.pic}}">
                        </ion-item>
                    </ion-list>

                    <!--加载更多-->
                    <ion-infinite-scroll
                            on-infinite="loadMore()"
                            distance="1%">
                    </ion-infinite-scroll>

                </ion-content>


            </ion-tab>

            <ion-tab title="购物车" icon-on="ion-ios-cart-outline" icon-off="ion-ios-cart">
                <!-- 标签 2 内容 -->
            </ion-tab>

            <ion-tab title="设置" icon-on="ion-android-settings" icon-off="ion-ios-gear-outline">
                <!-- 标签 3 内容 -->
            </ion-tab>

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

    <!-- 左侧菜单 -->
    <ion-side-menu side="left" width="220">
        <ion-list>
            <ion-item ><img src="images/f.JPG" style="width: 30px;height: 30px"/><span>随缘</span></ion-item>
            <ion-item ><span class="ion ion-cube"></span>      <span>我的收藏</span>      <span class="ion ion-ios-arrow-right"></span></ion-item>
            <ion-item ><span class="ion ion-university"></span>      <span>我的钱包</span>      <span class="ion ion-ios-arrow-right"></span></ion-item>
            <ion-item><span class="ion ion-settings"></span>      <span>我的设置</span>      <span class="ion ion-ios-arrow-right"></span></ion-item>
            <ion-item><span class="ion ion-tshirt"></span>      <span>个性装扮</span>      <span class="ion ion-ios-arrow-right"></span></ion-item>
        </ion-list>
    </ion-side-menu>


</ion-side-menus>


</body>
</html>

SXS120730
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ionic如何实现下拉刷新与上拉加载功能
09-02
在日常项目开发中我们经常见到下拉刷新上拉加载的功能，接下来通过本文给大家介绍ionic如何实现下拉刷新与上拉加载的相关资料,需要的朋友可以参考下
angularjs动态侧边栏菜单_【原创翻译】POSTMAN从入门到精通系列（四）：工具导航栏...
weixin_39765209的博客
12-11 185
Postman提供了一个多窗口和多标签界面，供您使用API。此界面设计为您提供尽可能多的API空间。侧边栏postman侧边栏可让您查找和管理请求和集合。侧边栏有两个主要选项卡：历史记录和集合。您可以拖动右边缘以调整侧边栏的宽度。您还可以最小化侧栏以显示较小的屏幕，并在状态栏中显示或隐藏侧栏。历史选项卡Postman应用程序会保存您在侧栏中的“历史记录”选项卡中发送的每个请...
angular.js+ionic上拉加载下拉刷新
青春正在燃烧的博客
11-12 383
页面效果 1.下拉刷新 使用ion-refresher,pulling-text下拉时的文本，refreshing-text刷新时的提示文本，on-refresh刷新方法。 <ion-refresher pulling-text="下拉刷新" refreshing-text="刷新中..." on-refresh="doRefresh()"></ion-refresher&gt...
Angular中使用ionic组件
Tonghanhan的博客
05-22 754
在项目的编写中除了使用ng-zorro组件来绘制pc端界面，同样可以使用ionic来绘制简单的移动端界面。此文章则是对一些简单的ionic的组件进行使用一、ion-input组件使用常用作登录以及一些表单的使用，与ion-list结合使用。注意:在项目中使用ionic自带的例子时，在ion-input上添加label不起效果。需重新设置ion-label标签来表示。如以下例子，在angular项目中不能起到效果应该使用如下方法，以下是常用的几种input框
Ionic 基本元素（ion-list）
ChaITSimpleLove的博客
03-15 649
【list-item】 <h3>&nbsp;&nbsp; list-item</h3> <ion-list lines="full"> <ion-item *ngFor="let item of list; let i=index;" [routerLink]="['/maws']"> <ion...
ionic list上拉全屏显示，下拉恢复
简简单单
09-30 1425
马上要给伟大的祖国母亲庆生了，也没有什么心情工作了，O(∩_∩)O哈哈~ 简单整理下这两天研究的东西，小弟学识浅薄，只是实现了效果，不知道还有没有其他的办法。 最近项目需求，简单实现了下ion-list上拉时将页面全屏显示，下拉恢复（也可以在上拉到顶部时恢复）。因为页面需要在列表处可以进行拖拽，前期做这个项目的时候也是刚刚接触phonegap，就把ion-content放在了对应列表的地方，在上部就
解决ionic和angular上拉加载的问题
08-29
主要介绍了解决ionic和angular上拉加载的问题,需要的朋友可以参考下
基于Ionic3实现选项卡切换并重新加载echarts
10-14
主要介绍了基于Ionic3实现选项卡切换并重新加载echarts,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
angular+ionic 的app上拉加载更新数据实现方法
08-31
主要介绍了angular+ionic 的app上拉加载更新数据实现方法，需要的的朋友参考下
ionic5 上拉分页加载更多ion-infinite-scroll
u010574271的博客
05-14 455
在我们使用软件的时候，尤其是列表类型，常常一次性不会展示所有的内容，只有当我们上拉到最底下的时候生成转圈动态图，同时会发送请求数据，从而显示更多的信息，这时候就需要用到上拉分页加载跟多的组件ion-infinite-scroll 参考资料 https://ionicframework.com/docs/api/infinite-scroll 下面我们在利用案例来实现这一功能 准备 新建项目 我们使用ionic start ionicdemo06创建项目 新建列表 我们首先在ts中新建list数组变量，然
侧边选项卡
BruceWang的专栏
11-29 1151
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh"> http://www.w3.org/2000/08/w3c-synd/#"> dl {  position:absolute;  width:270px;  he
angularjs 上拉加载，下拉刷新数据功能
菜鸡奋斗ing的博客
04-25 2万+
虽说angularjs 1.x版本中对于上拉加载，下拉刷新数据功能都有做些封装，但还是有些人不清楚。其实我一开始也是不懂的，so.现在把搞懂的记录下免得少走弯路。 now,begin:先说下拉刷新吧，原理就是每次下拉都重新去服务器请求过一次新的数据。一般这种刷新功能的响应数据（也就是服务器返回的（json）数据）中都会带有"rowsOfPage": 3, "curr
angularJs实现动态控制侧边栏菜单
砂糖葫芦娃的博客
12-16 6817
应项目的不同所以菜单的层级也不固定，所以在这里我写了5层菜单，哈哈。首先是html代码。//菜单html代码<ul class="page-sidebar-menu"> <li ng-repeat="menu in menus"> <a ui-sref={{menu.router}} style="cursor: pointer" ng-click="getMenuName
Ionic基础——列表ion-list
bboyjoe的博客
02-18 1万+
一.列表 : ion-list    列表是常用的信息组织方式。在ionic中，使用ion-list指令声明列表 元素，使用ion-item指令声明成员元素： ... ... ...    ion-list指令提供以下属性用来定制列表的外观： type - 列表种类。type属性是可选的，可用来设置列表的种类： list-inset | card。这两
移动端 ionic angularjs列表和单选以及多选框混合使用问题
程序员
05-24 2432
第一次使用ionic，需要展现一个列表，列表下面是输入框或者多选、单选。就是一张问卷 想的是先展现题目列表，每个题目里面嵌套多选、单选或者输入框，结果不行。不知道是什么原因，是列表禁用了点击功能还是什么（如有知道的，请给小弟解惑啊）？ 代码： body { cursor: url('http://www.runoob.com/try/d
ionic的侧滑和下拉刷新效果
热门推荐
superjunjin的专栏
04-03 4万+
一，侧滑效果 主要涉及到三个地方 1，菜单页面 主要分为主页面和侧滑页面两部分，又分别都包含顶部bar和主要内容部分 注意：主页面内容部分，关键的菜单内容name要对应到是菜单内容的页面（在app.js中，下面会贴出）           item href的构成：1，#本页面  2，app本页面链接   3，todolist/{{menu.groupId}}列表页面链接（没有冒号）
AngularJS + Ionic 下拉刷新
archer的技术故事
07-20 1926
AngularJS + Ionic 下拉刷新 angular.module("app.yourCtrl", ["ionic"]) .controller('yourCtrl', function ($rootScope, $scope, $http) { $scope.list = []; var p = {page: 1, pagesize: 5};
ionic分页
小小程序猿
12-10 2822
var pageList = function (url) { var params = { pageSize: 6, offset: 0 }; var model = { items: [], //集合列表 totalCount: 0, //总条数 currentNumber: 0, //当前加载条数 pageSize: params.
angular2 移动端 实现上拉加载下拉刷新
最新发布
09-06
我们可以使用Ionic框架中提供的IonRefresher和InfiniteScroll组件来实现下拉刷新和上拉加载的效果。需要确保已经安装了Ionic框架并引入了相关的模块。 2. 在需要实现上拉加载的页面或组件中，添加一个IonRefresher...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值