Question

我有一个ion-content可滚动的项目，其中有一些锚点可以跳转到某些位置。在ion-content之外，我有一个按钮，可以跳到下一个位置。例如：

Jump to Position2
**Position1**
Text
Text
Text
Text
**Position2**
Text
Text
Text

快速解决方案是将一个监听器附加到滚动完成：

<ion-content delegate-handle="scroll1" on-scroll-complete="setTextForScroll()">

然后根据控制器中的滚动位置设置标签

 var settingsScroller = $ionicScrollDelegate.$getByHandle('scroll1');
 var posXScroll = settingsScroller.getScrollPosition().top;
 if posXScroll === xy ...

但这是一个快速的解决方法。它不适用于不同的屏幕尺寸或动态变化模板。

我的下一个想法是做一个属性指令，它以这种方式添加所有标记的元素，并在渲染滚动中的位置到数组，并计算当前哪个元素最接近滚动位置。

但是现在我在渲染DOM元素的位置到控制器AND时遇到了问题我想也许我的方法很复杂：/。

想法？非常感谢您的帮助!! 听起来有点简单......滚动 - ＆gt;标签。完成：D

干杯AucklandDB

Answer 1

如果你想定义一个可以滚动到的锚点，只需在文档中放置你想要到达的位置

<a name="anchor"></a>

比你能以这种方式达到那个位置：

<a href="#anchor">Go to anchor!</a>

Answer 2

您可以离子方式进行，查看doc

在html中：

<ion-content delegate-handle="myPageDelegate">
  <a ng-click="scrollTo('Contact')"></a>

  <div id="Contact">
  //some content goes here
  </div>

然后在js：

myApp.controller('MyCtrl', function ($scope,$ionicScrollDelegate,$location) {
  $scope.scrollTo = function(target){
    $location.hash(target);   //set the location hash
    var handle = $ionicScrollDelegate.$getByHandle('myPageDelegate');
    handle.anchorScroll(true);  // 'true' for animation
  };
});

AngularJS + Ionic：标签取决于滚动位置

2 个答案: