ionic 简单应用下拉刷新 选项卡栏操作 滚动条

最新推荐文章于 2020-03-14 00:17:04 发布
最新推荐文章于 2020-03-14 00:17:04 发布
阅读量373 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XiaoZhuang__/article/details/78807014
版权

!DOCTYPE html>

//下拉刷新

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/ionic.css" />
        <script type="text/javascript" src="js/ionic.bundle.min.js" ></script>
    </head>
    <body ng-app="myapp" ng-controller="mycrl">
        
        
        <ion-view title="Home" hide-nav-bar="true">
        <!--滚动条-->
        <ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
        
        
        <div style="width: 1000px;height: 1000px;">                            
        <!--下拉刷新-->
        <ion-content>
        <ion-refresher pulling-text="下拉刷新" on-refresh="shua()"></ion-refresher>
        <ion-list class="list">
            <ion-item class="item" ng-repeat="a in aa track by $index">{{a}}</ion-item>
        </ion-list>
        </ion-content>
        </div>
        
        
        </ion-scroll>    
        
        </ion-view>
        <script type="text/javascript">
            var mo=angular.module("myapp",["ionic"]);
            mo.controller("mycrl",function($scope,$http){
                $scope.aa=["李四","王五"];
                //刷新的方法
                $scope.shua=function(){
                    //通过服务获取数据
                    $http.get("data/data1.json").then(function(req){
                          //接收数据
                          var dd=req.data;
                          for (var i = 0; i < dd.length; i++) {
                                $scope.aa.push(dd[i].name);
                          }
                          //发送广播
                        $scope.$broadcast('scroll.refreshComplete');
                    });
                };
            });
        </script>
    </body>

</html>


//选项卡

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/ionic.css" />
        <script type="text/javascript" src="js/ionic.bundle.min.js" ></script>
    </head>
    <body ng-app="myapp" ng-controller="mycrl">
        <!--选项卡栏操作-->
        <ion-tabs class="tabs-icon-only tabs-positive">
            <ion-tab title="Aa">
                <header class="bar bar-header bar-positive">
                    <h2 class="title">Sett</h2>
                </header><br />    <br />    
                <center>
                    <ul class="list">
                        <li class="item">我</li>
                        <li class="item">爱</li>
                        <li class="item">你</li>
                    </ul>
                </center>
            </ion-tab>
            
            <ion-tab title="Bb">
                <header class="bar bar-header bar-positive">
                    <h2 class="title">Tasks</h2>
                </header><br />    <br />    
                <center>
                    <ul class="list">
                        <li class="item">你</li>
                        <li class="item">爱</li>
                        <li class="item">我</li>
                    </ul>
                </center>
            </ion-tab>
        </ion-tabs>
        <script type="text/javascript">
            var mo=angular.module("myapp",["ionic"]);
            mo.controller("mycrl",function($scope){
                
            });
        </script>
    </body>
</html>

//侧拉

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/ionic.css" />
        <script type="text/javascript" src="js/ionic.bundle.min.js" ></script>
    </head>
    <body ng-app="myapp" ng-controller="mycrl">
        <!--侧栏菜单-->
        <ion-side-menus>
            <!--
                左侧内容
                
            -->
        <ion-side-menu side="left">
            <ul>
                    <li>zhangsan</li>
            </ul>
        </ion-side-menu>
            
        <!--
                中间 的内容
            -->
            <ion-side-menu-content>
                <div class="content">
                    我是中间内容
                </div>
            </ion-side-menu-content>
         <!--
                右侧
            -->
            <ion-side-menu side = "right">
                <ul>
                    <li>我是右侧的zhangsan</li>
                </ul>
            </ion-slide-menu>
    
            
        </ion-side-menu>
        <script type="text/javascript">
            var mo=angular.module("myapp",["ionic"]);
            mo.controller("mycrl",function($scope){
                
            });
        </script>
    </body>
</html>


小白的成长之路_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ionic 选项卡栏操作
01-06
ionic 选项卡栏操作 ion-tabs ion-tabs 是有一组页面选项卡组成的选项卡栏。可以通过点击选项来切换页面。 对于 iOS，它会出现在屏幕的底部，Android会出现在屏幕的顶部(导航栏下面)。 用法 实例 效果如下...
ionic实现滑动的三种方式
weixin_19970108018的博客
07-08 219
监听touch事件 {{d}} 对应的js angular.module('starter.controllers', []) .controller('DashCtrl', function($scope) { $scope.datas=[1,2,3,4,5,6,7,8,9,10];}else if( Math.abs(y) >http:// Math.abs(x)){//上下滑动 scrollTop($(this),y);
Ionic2自定义组件的使用
rrgbf0123的专栏
06-06 7035
Ionic的便捷之处就是为我们提供了一系列组件，如ion-header、ion-content等。当Ionic2自带的组件不能满足项目需求时，我们便需要自定义组件。 1.使用命令生成自定义组件模版 ionic g component myComponent 此处省略了创建新项目的步骤，不了解的同学请查看之前的文章。ionic-cli提供了很多便捷的操作，比如生成自定义组件模版
ionic4基础教程（案例和实战小demo）
baidu_21349635的专栏
10-31 1万+
文章目录ionic4教程一、Ionic 介绍以及Ionic 环境搭建1、Ionic 介绍以及Ionic Packages2、ionic Packages3.、Ionic 的安装运行①.学习前准备工作②安装cordova ionic③创建项目:④运行项目4.Ionic 有时候安装失败怎么办二、Ionic 目录结构分析、核心文件分析、执行流程1.Ionic4.x 目录结构分析2.Ionic4.x sr......
ionic3 ion-select下拉列表
西卡卡的博客
02-05 1万+
HTML：&lt;ion-list &gt; &lt;ion-item&gt; &lt;ion-label stacked&gt;问题类型&lt;/ion-label&gt; &lt;ion-select [(ngModel)]="typeTxt" (ngModelChange)="switchType()" interface="popover" sty
ionic实现滑动选择栏
福尔摩杰的博客
06-25 833
本次记录一下项目中使用到的滑动选择栏的功能，感觉效果还可以。 实现后的效果图 代码实现 所使用的是ionic滚动条ion-scroll标签，它用于创建可滚动的容器。将要添加的内容放到此标签内。 html代码部分 <ion-header class="hh"> <div class="head"> <div class="head-name"> ...
Ionic如何实现下拉刷新与上拉加载功能
09-02
在日常项目开发中我们经常见到下拉刷新上拉加载的功能，接下来通过本文给大家介绍ionic如何实现下拉刷新与上拉加载的相关资料,需要的朋友可以参考下
ionic实现下拉刷新载入数据功能
08-30
主要为大家详细介绍了ionic实现下拉刷新载入数据功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Ionic实现页面下拉刷新(ion-refresher）功能代码
09-02
主要介绍了使用Ionic实现页面下拉刷新(ion-refresher）功能的代码，感兴趣的朋友一起看看吧
基于ionic实现下拉刷新功能
08-27
主要为大家详细介绍了基于ionic实现下拉刷新功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Ionic+cordova+angularJS 项目实现IPhone 下拉框滚动效果
chenshi6147的博客
05-16 169
方法一： 在index.html 引入如下文件 <link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" type="text/css" href="../css/app.cs...
ionic（angularjs）select下拉选择第一个选项为空白的解决办法
热门推荐
WenJimmy的专栏
03-29 1万+
查看官方示例 ngoption angularjs中下拉框select option默认值 很明显也有这样的错误，审查元素发现空白项为<option value="? object:null ?"></option> 或者 <option value="? string:string ?"></option> 或者 <option value="? undefined:undefined ?"
AngularJS的ionic（侧拉、选项卡、list展示、上拉加载、下拉刷新）
SXS120730的博客
10-18 854
Title img{ width: 100%; height:250px; } var myapp=angular.module("myapp",["ionic"]); myapp.controller("myCtrl",fu
ionic下拉多项选择
weixin_34166847的博客
01-30 830
1、npm install ion-multi-picker --save 2、引入 import { MultiPickerModule } from 'ion-multi-picker'; imports: [ 　　MultiPickerModule, ], this.simpleColumns = [{ 　　name: 'col1', 　　options: [...
ionic 下拉选择-选项绑定
zhaoyue960607的博客
03-14 789
方式一：事件绑定 .html <ion-list> <ion-item> <ion-label class="label">职称：</ion-label> <ion-select placeholder="请选择您的职称" value="" okText="确定" cancelText="取消" mode="...
ionic学习（十一）：页面下拉刷新(Refresher)
七刀的专栏
09-08 463
官网参考： https://ionicframework.com/docs/api/components/refresher/Refresher/   用法说明： 在html页面需要下拉刷新的位置添加如下代码： &lt;!-- 下拉刷新 --&gt; &lt;ion-refresher (ionRefresh)="doRefresh($event)"&gt; ...
angular2 移动端 实现上拉加载下拉刷新
最新发布
09-06
在Angular2移动端中实现上拉加载和下拉刷新的方式有许多种。下面我将介绍一种常用的实现方法。 1. 首先，我们需要引入一些必要的库和组件。我们可以使用Ionic框架中提供的IonRefresher和InfiniteScroll组件来实现下拉刷新和上拉加载的效果。需要确保已经安装了Ionic框架并引入了相关的模块。 2. 在需要实现上拉加载的页面或组件中，添加一个IonRefresher组件，并绑定事件。例如： ```html <ion-content> <ion-refresher (ionRefresh)="doRefresh($event)"> <ion-refresher-content></ion-refresher-content> </ion-refresher> <!--其他内容--> </ion-content> ``` 在组件中，定义一个doRefresh方法来处理刷新的逻辑。例如： ```typescript import { Component } from '@angular/core'; @Component({ selector: 'your-component', templateUrl: 'your-component.html', styleUrls: ['your-component.css'] }) export class YourComponent { doRefresh(event) { // 执行刷新逻辑 // 更新数据 // 结束刷新动作 event.complete(); } } ``` 3. 接下来，我们来实现上拉加载的效果。在页面或组件中添加一个InfiniteScroll组件，并绑定事件。例如： ```html <ion-content (ionInfinite)="loadMore($event)"> <!--其他内容--> <ion-infinite-scroll> <ion-infinite-scroll-content></ion-infinite-scroll-content> </ion-infinite-scroll> </ion-content> ``` 在组件中，定义一个loadMore方法来处理加载更多的逻辑。例如： ```typescript import { Component } from '@angular/core'; @Component({ selector: 'your-component', templateUrl: 'your-component.html', styleUrls: ['your-component.css'] }) export class YourComponent { loadMore(event) { // 执行加载更多逻辑 // 加载更多数据 // 结束加载更多动作 event.complete(); } } ``` 以上就是使用Ionic框架中的IonRefresher和InfiniteScroll组件来实现Angular2移动端上拉加载和下拉刷新的步骤。需注意在具体的业务逻辑中，需要结合实际情况进行相应的处理。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值