草庐IT

ionic 滚动条

runoob 2023-04-07 原文

ionic 滚动条

ion-scroll

ion-scroll 用于创建一个可滚动的容器。

用法

<ion-scroll
    [delegate-handle=""]
    [direction=""]
    [paging=""]
    [on-refresh=""]
    [on-scroll=""]
    [scrollbar-x=""]
    [scrollbar-y=""]
    [zooming=""]
    [min-zoom=""]
    [max-zoom=""]>
    ...
</ion-scroll>

API

属性 类型 详情
delegate-handle
(可选)
 字符串

该句柄利用$ionicScrollDelegate指定滚动视图。
direction
(可选)
 字符串

滚动的方向。 'x' 或 'y'。 默认 'y'。
paging
(可选)
 布尔值

分页是否滚动。
on-refresh
(可选)
 表达式

调用下拉刷新， 由ionRefresher触发。
on-scroll
(可选)
 表达式

当用户滚动时触发。
scrollbar-x
(可选)
 布尔值

是否显示水平滚动条。默认为false。
scrollbar-y
(可选)
 布尔值

是否显示垂直滚动条。默认为true。
zooming
(可选)
 布尔值

是否支持双指缩放。
min-zoom
(可选)
 整数

允许的最小缩放量（默认为0.5）
max-zoom
(可选)
 整数

允许的最大缩放量（默认为3）

实例

HTML 代码

<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
    <div style="width: 5000px; height: 5000px; background: url('http://www.runoob.com/try/demo_source/Europe_geological_map-en.jpg') repeat"></div>
</ion-scroll>

CSS 代码

body {
  cursor: url('http://www.runoob.com/try/demo_source/finger.png'), auto;
}

JavaScript 代码

angular.module('ionicApp', ['ionic']);

ion-infinite-scroll

当用户到达页脚或页脚附近时，ionInfiniteScroll指令允许你调用一个函数 。

当用户滚动的距离超出底部的内容时，就会触发你指定的on-infinite。

用法

<ion-content ng-controller="MyController">
  <ion-infinite-scroll
    on-infinite="loadMore()"
    distance="1%">
  </ion-infinite-scroll>
</ion-content>

function MyController($scope, $http) {
  $scope.items = [];
  $scope.loadMore = function() {
    $http.get('/more-items').success(function(items) {
      useItems(items);
      $scope.$broadcast('scroll.infiniteScrollComplete');
    });
  };

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

当没有更多数据加载时，就可以用一个简单的方法阻止无限滚动，那就是angular的ng-if 指令:

<ion-infinite-scroll
  ng-if="moreDataCanBeLoaded()"
  icon="ion-loading-c"
  on-infinite="loadMoreData()">
</ion-infinite-scroll>

API

属性 类型 详情
on-infinite 表达式

当滚动到底部时触发的事件。
distance
(可选)
 字符串

从底部滚动到触发on-infinite表达式的距离。默认: 1%。
icon
(可选)
 字符串

当加载时显示的图标。默认: 'ion-loading-d'。

$ionicScrollDelegate

授权控制滚动视图（通过ion-content 和 ion-scroll指令创建）。

该方法直接被$ionicScrollDelegate服务触发，来控制所有滚动视图。用 $getByHandle方法控制特定的滚动视图。

用法

<body ng-controller="MainCtrl">
  <ion-content>
    <button ng-click="scrollTop()">滚动到顶部!</button>
  </ion-content>
</body>

function MainCtrl($scope, $ionicScrollDelegate) {
  $scope.scrollTop = function() {
    $ionicScrollDelegate.scrollTop();
  };
}

方法

resize()

告诉滚动视图重新计算它的容器大小。

scrollTop([shouldAnimate])
参数 类型 详情
shouldAnimate
(可选)
 布尔值

是否应用滚动动画。

 
scrollBottom([shouldAnimate])
参数 类型 详情
shouldAnimate
(可选)
 布尔值

是否应用滚动动画。
ionic滚动条nbsptdsection

有关ionic 滚动条的更多相关文章

  1. ruby - 绕过 Element 的方法无法滚动到 View 中 - Watir-webdriver with Ruby - 2

    因此，我们的页面中有以下代码:OnOff这是2个单选按钮。'开和关'。“关闭”是默认值。使用Watir-webdriver和Ruby，我们想要选择“打开”单选按钮。我们这样做:browser.radio(:id=>"HasRegistration_true").set但在这样做时，我们得到以下错误:`WebElement.clickElement':Elementcannotbescrolledintoview:[objectHTMLInputElement](Selenium::WebDriver::Error::MoveTargetOutOfBoundsError)我们知道Sele

  2. ruby - 如何使用 watir 滚动网页 - 2

    我正在尝试滚动网页以查找并单击滚动页面时延迟加载的内容。我正在使用以下命令require'watir-webdriver'@browser=Watir::new:firefox@browser.send_keys:space我在firefox上使用网络驱动程序，我在ubuntu上，但它不工作。在下面的ruby​​代码中，我试图向下滚动页面，直到找不到带有:id的元素。该元素正在延迟加载。几秒钟后我超时了，不知道下面的代码有什么问题。When/^deal(\d+)isloaded$/do|id|(0..5).eachdo|click|@browser.send_keys:spaceend

  3. ruby - Selenium 滚动元素进入(中心) View - 2

    当一个元素在selenium的View之外并且试图与之交互时，selenium通常会首先隐式地将元素滚动到View中。这很棒，只是烦人的是它通常将元素放入View中。我的意思是，如果元素位于窗口下方，它会向下滚动足够多直到元素刚好与窗口边缘接壤。通常这很好，但是当在周围有边框的网站上工作时，这将导致许多此类错误Selenium::WebDriver::Error::UnknownError:unknownerror:Elementisnotclickableatpoint(438,747).Otherelementwouldreceivetheclick:...因为通常网页的边框都在它

  4. javascript - 在上方和下方添加新内容时锁定滚动 - 2

    我有一个用作新闻提要的meteor.js应用程序，可以发布话题，人们可以实时评论话题。这意味着当您查看帖子时，将在帖子上方和下方添加新评论，并且在上方添加新话题。这会将您正在关注的帖子向下推到视口(viewport)之外，这是意想不到的(除非您已经滚动到顶部)。更新滚动以在添加新内容时保持相同视觉中心的最佳方法是什么？ 最佳答案 你可以试试这个方法:保存scrollTop值；在内容前添加内容(即，在关注的帖子上方添加新帖子)；将新内容的高度添加到步骤1中保存的值；滚动到新值。这是一个例子:functionrandomString()

  5. javascript - 更改 scrollTop 不会继续惯性滚动 - 2

    我有一个包含可滚动内容的div，在某个scrollTop值返回到顶部。varcontainer=document.getElementById('container');functionscroll_function(){varnew_position_top=container.scrollTop;if(new_position_top>600){container.scrollTop=0;}}container.addEventListener('scroll',scroll_function);#container{width:300px;height:300px;overflo

  6. javascript - 水平滚动的 SVG - 2

    我正在尝试用D3(https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js)做一个SVG图形，其中条形宽度是手动定义的，并且有一个水平滚动条..我这里有一个工作fiddlehttps://jsfiddle.net/bikrantsharma/zw264tfc/12/我的比例是这样定义的varbarWidth=30,paddingFactor=2.2,responsiveDIVHeight=300,responsiveDIVWidth=tempData.length*barWidth*paddingFactor;varx=d3.

  7. javascript - 带有 ionic 搜索栏焦点的 ionic 触发模式打开功能 - 单击不起作用 - 2

    我有一个ion-searchbar，单击它会打开一个模式。然而，目前click过程实际上需要两次点击，一次聚焦，一次打开模式。我试图将点击添加到它包含的ion-toolbar中，并尝试使用[disabled]="true"禁用ion-searchbar"，但禁用的功能对ion-searchbar不可用。如何在无需双击的情况下触发新模式打开，并且焦点不会出现在原始搜索栏上？HTMLJSopenSearchModal(){letmyModal=this.modalCtrl.create(SearchmodalPage);myModal.present();} 最

  8. javascript - 从 IONIC 3 的 Assets 文件夹下载 CSV 文件 - 2

    我有一个demo-file.csv文件，它在assets/csv文件夹中，那么如何从手机下载它，这是我的HTML和组件代码。HTML代码DownloadDemoFile组件代码publicdownloadFile(link:any,fileName:any){if(link){letpath=null;this.showWaitingLoading();if(this.platform.is('ios')){path=this.file.documentsDirectory;}else{path=this.file.dataDirectory;}consttransfer=this.t

  9. javascript - 如何检查滚动条是否可见？ - 2

    我想在我的网站上显示一个“转到顶部”链接。只有在垂直滚动条可见时，该链接才应该可见。我如何使用JavaScript执行此操作？谢谢 最佳答案 你可以查看elem.clientHeight值，但它也取决于css属性 关于javascript-如何检查滚动条是否可见？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/2927963/

  10. javascript - 谷歌地图 API；抑制 map 平移以启用页面滚动 - 2

    我有一个移动网页，客户可以在其中通过表单提交或当前位置弹出窗口输入他们的邮政编码，然后找到附近的中心。响应包括这些中心的列表以及显示其位置的googlemap插入和指示列表中指示的中心的图钉。问题是map占用了页面上的大量空间。很难向下滚动到map下方的列表。我想禁用Googlemap上的平移功能，以便人们可以触摸map并上下滚动页面。但是，我不想完全抑制map上的所有触摸事件，因为我仍然希望人们能够单击图钉并查看与这些标记一起出现的弹出信息框。这就是为什么我认为静态图像实现可能不是可行的方法。这是页面的链接:http://cs.sandbox.millennialmedia.com/

随机推荐