ionic滚动条 左右滑动上拉刷新

最新推荐文章于 2023-05-22 11:17:10 发布
最新推荐文章于 2023-05-22 11:17:10 发布
阅读量381 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lian895615/article/details/78812357
版权
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>滚动条</title>
        <script src="js/ionic.bundle.min.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" type="text/css" href="css/ionic.css" />
    </head>

    <body ng-app="myApp" ng-controller="myCtrl">
        <!--
            scroll 滚动条
        -->
        <ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
            <div style="width: 5000px; height: 5000px; background: url('http://a.hiphotos.baidu.com/image/pic/item/50da81cb39dbb6fda2d331e50324ab18962b376d.jpg') repeat"></div>
        </ion-scroll>
        <ion-tabs class="tabs-icon-only tabs-positive">

            <ion-tab title="About" icon-on="icon ion-ios-clock" icon-off="icon ion-ios-clock-outline">
                <header class="bar bar-header bar-positive">
                    <h1 class="title">Deadlines</h1>
                </header>
                <ion-content has-header="true">
                    <h1>Deadlines</h1>
                </ion-content>
            </ion-tab>

            <ion-tab title="Settings" icon-on="icon ion-ios-gear" icon-off="icon ion-ios-gear-outline">
                <header class="bar bar-header bar-positive">
                    <h1 class="title">Settings</h1>
                </header>
                <ion-content has-header="true">
                    <h1>Settings</h1>
                </ion-content>
            </ion-tab>

        </ion-tabs>
        <script type="text/javascript">
            var mo = angular.module('myApp', ["ionic"]);
            mo.controller("myCtrl", function($scope) {

            })
        </script>
    </body>

</html>

------------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>下拉加载</title>
        <script src="js/ionic.bundle.min.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" type="text/css" href="css/ionic.css"/>
        <script type="text/javascript">
            var mo=angular.module("myApp",['ionic']);
            mo.controller("myCtrl",function($scope,$http){
                $scope.names=["你好啊","我来啦","别跑啊"]
                $scope.refresh=function(){
                    
                    $http.get("data/data1.json").then(function(req){
                        var newNames=req.data;
                        for (var i=0;i<newNames.length;i++) {
                            $scope.names.push(newNames[i].name);
                        }
                        $scope.$broadcast('scroll.refreshComplete')
                    },function(req){
                        Console.log("失败")
                    }).finally(function(){
                        
                    })
                }
            })
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        <ion-header-bar class="bar-calm">
            <h1 class="title">加载更多</h1>
        </ion-header-bar>
        <ion-content>
            <ion-refresher pulling-text="刷新..." on-refresh="refresh()">
                
            </ion-refresher>
            <ul class="list">
                <li class="item" ng-repeat="name in names track by $index">{{name}}</li>
            </ul>
        </ion-content>
    </body>
</html>


-----------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>左右滑动</title>
        <script src="js/ionic.bundle.min.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" type="text/css" href="css/ionic.css"/>
        <script type="text/javascript">
            var mo=angular.module("myApp",['ionic']);
            mo.controller("myCtrl",function($scope){
                
            })
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        <ion-side-menus>
            <ion-side-menu side="left">
                <ul>
                    <li>李三</li>
                </ul>
            </ion-side-menu>
            <ion-side-menu-content>
                <div class="content">
                    流氓
                </div>
            </ion-side-menu-content>
            <ion-side-menu side="right">
                <ul>
                    <li>杜五</li>
                </ul>
            </ion-side-menu>
        </ion-side-menus>
    </body>
</html>


























未至D增援
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ionic实战二十四：列表数据左右滑动的实现
博主逸尘
09-22 493
Ionic中列表数据左右滑动的实现
ionic4 hammerjs手势事件左滑右滑
沉睡的博客
06-09 213
ionic4 hammerjs手势事件左滑右滑 首先需要安装hammerjs ，在项目目录下执行： npm install hammerjs --save ts: import 'hammerjs'; SWIPE_ACTION = { LEFT: 'swipeleft', RIGHT: 'swiperight' }; // action triggered when user swi...
ionic_content——左右滑动（如地图）
Cf1035630950的博客
12-14 1386
var app = angular.module("myApp", ["ionic"]); app.controller("myCtrl", function($scope, $ionicScrollDelegate) { $scope.scrollTop = function() { $ionicScrollDelegate.scrollTop(); } });
ionic4 手势事件 左滑、右滑
C1oak的博客
05-07 408
ionic4 手势事件 左滑、右滑1.安装手势插件2.需要在项目的src/main.ts 中引入hammerjs ，完整代码如下3.html页标签手势事件调用ts方法 1.安装手势插件 npm install hammerjs --save 2.需要在项目的src/main.ts 中引入hammerjs ，完整代码如下 import { enableProdMode } from '@angul...
移动端如何实现上拉加载？下拉刷新？
A_lose的博客
05-22 3839
1、首先需要下载第三方库antd-mobile我们需要使用的是InfiniteScroll 无限滚动、PullToRefresh 下拉刷新2、我们需要在最外层的盒子上定义ref属性，并且需要调用onScroll事件、最外层盒子样式需要overflow-y:scroll;这里我们需要使用ref获取到页面高度和滚动条高度通过onScroll事件来判断是否触底这里是触底的操作 我们页面到底数据更新是在这里进行重新调用获取数据接口来渲染页面css必须使用overflow-y:scroll;
【ionic】实现页面上下左右滑动
hoiyaku
09-08 757
1.安装 npm install hammerjs --save && npm install @types/hammerjs --save-dev 2.创建MyHammerConfig.ts import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser'; impor...
Ionic如何实现下拉刷新与上拉加载功能
09-02
在使用Ionic进行移动应用开发时，经常会遇到需要实现下拉刷新（Pull to Refresh）和上拉加载更多（Infinite Scroll）的功能，这两种功能对于提升用户体验至关重要。本文将详细介绍如何在Ionic框架中实现这两个功能。...
angular+ionic返回上一页并刷新页面
08-29
Angular+Ionic返回上一页并刷新页面 Angular和Ionic是当前流行的前端框架，它们都提供了丰富的功能和插件来帮助开发者快速构建应用程序。然而，在实际开发过程中，开发者经常会遇到一些棘手的问题，例如如何返回上...
解决ionic和angular上拉加载的问题
08-29
"解决Ionic和Angular上拉加载的问题" 在移动应用程序开发中，上拉加载是一种常见的交互方式，许多开发者都会遇到上拉加载的问题，本文将详细介绍解决Ionic和Angular上拉加载的问题。 什么是上拉加载？ 上拉加载是...
angular+ionic 的app上拉加载更新数据实现方法
08-31
本文将深入探讨如何在Angular和Ionic应用中实现上拉加载更多数据的功能，这对于处理大量动态数据流的应用来说非常实用。 首先，我们需要在`<ion-content>`组件中添加`<ion-infinite-scroll>`标签来启用上拉加载功能...
ionic 上拉加载和下拉刷新demo
05-26
ionic 上拉加载和下拉刷新demo
ionic3用Segment实现左右滑动菜单
Dan_2017
01-03 8382
1.这里使用Segment实现左右滑动菜单主要是解决一下两个问题： 之前在 Ionic3学习笔记(三)这篇博客里我使用的Swiper实现的左右滑动菜单的页面布局默认居中的问题，在 .slide-zoom { height: 100%; } 里面你可以这是页面的整体布局是left，center，right，但是在页面里面子级布局就继承了这里的父级布局，导致布局困难，
ionic上拉刷新功能的demo
minuhdbsd的博客
05-15 1633
前言：本demo是一个招聘信息的展示。每次从后台查15条数据到前台展示，利用一个 一、预热知识 1、               详情参考菜鸟教程：http://www.runoob.com/ionic/ionic-scroll.html         2、ng-if   详情参考菜鸟教程：http://www.runoob.com/angularjs/ng-ng-if.
使用ionic框架的<ion-scroll>进行水平滚动时，导致页面难以上下滑动的解决方案
热门推荐
aty
03-17 2万+
但是我们项目中遇到一个问题：一个页面很大，有多个画廊控件，我们的页面很难上下滑动，滑动非常吃力，这是为什么呢？举个例子：如果你的页面放的全都是input输入控件，那么这个页面一样很难滑动，因为当我们在手机屏幕上滑动的时候，一不小心很容易就会点中这些输入框，当输入框获得焦点，页面就不能滑动了。使用<ion-scroll>一样有这个问题，当页面全是画廊控件的时候，滑动也十分费劲。从ionic文档中也没有找到好的解决办法，最后解决方法是：不使用<ion-scroll>指令，自己实现左右滑动。利用HTML5中的to
ionic 滑动块 ion-slide-box 左右无缝滚动
杨采臣的官方博客
03-14 2108
看官网教程也没有名称说明，最终通过查阅资料在 属性中添加  auto-play="true" 可以实现左右无缝滚动
ionic：实现滑动的三种方式
lishihong
08-17 5975
在移动端受屏幕大小所限，展示内容很多的时候，就要使部分区域进行滑动。本文展示项目中所有到的几种方式，大家可以看自己的需求选择合适的滑动方式。实现滑动的基本原理，有两个容器A、B,假如A在外层，B在内层；外层的A宽度或高度固定，内层容器B宽度或者高度大于A即可实现滚动。
ionic 左右滑动 广告
黄彪博客
09-07 787
使用ion-slide-box 命令做效果   控制器从服务器获取广告数据 //进入家政服务的导航页面 angular.module("jiazhengApp").controller("jiazhengIndexController", ["$scope", "$state", '$http', 'khbjIndexS
angular2 移动端 实现上拉加载下拉刷新
最新发布
09-06
我们可以使用Ionic框架中提供的IonRefresher和InfiniteScroll组件来实现下拉刷新和上拉加载的效果。需要确保已经安装了Ionic框架并引入了相关的模块。 2. 在需要实现上拉加载的页面或组件中，添加一个IonRefresher...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值