AngularJS + Ionic：標籤取決於滾動位置

我有一個ion-content可滾動項目和一些錨點在其中跳轉到某些位置。在ion-content之外，我有一個按鈕可以跳轉到下一個位置。例如：AngularJS + Ionic：標籤取決於滾動位置

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元素的位置的控制器和我想也許我的方法是複雜的：/。

和想法？您的幫助將非常感謝！這聽起來有點簡單...滾動 - >標籤。完成：d

乾杯AucklandDB

來源

2014-10-20 AucklandDB

如果要定義可以滾動到一個錨，簡單地說這樣的事情在你的位置記錄要達到

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

比你能達到這個位置是這樣的：

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

來源

2015-03-21 09:37:12 JackNova

你可以做到這一點離子的方式，檢查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 
    }; 
});

來源

2016-08-29 08:03:36 Mavlarn

AngularJS + Ionic：標籤取決於滾動位置

回答

相關問題