WinJS : Pivot and PivotItem slide event

Question

I'm trying to build an app on Windows Phone 8.1 with WinJS 2.1 and some Pivot controls. I want to detect a PivotItem slide left or right, but according to this MSDN page (http://msdn.microsoft.com/en-us/library/windows/apps/dn624879.aspx), there's no slide event like 'onslideleft'. My target is to avoid Pivot looping : when we reach last PivotItem and slide left again, it returns to first PivotItem. I just want to block left sliding when user reach last PivotItem (and block right sliding for first PivotItem).

How can I do it ?

Thanks you.

Answer 1

You can't achieve this in pivot control straight away, but you can get the pivot slide direction in selectionchange event like this,

document.getElementById("PivotID").addEventListener("selectionchanged", swipehandler);

function swipehandler(evt) {
      var direction = evt.detail.direction;  // 'forward' or 'backwards'
}

So in this selection change event you can check the length and index of pivot and restrict the pivot looping but if you do like this pivot would be flickering. Anyway just give a try.

Answer 2

Not sure if this is what you want but you can check selectedIndex when selectionchanged and keep track to see if you hit the described situation.

    ready: function (element, options) {

        var pivotEl = document.getElementById("idofpivotcontrol");

        pivotEl.addEventListener('selectionchanged', function (ev) {
            var pivotControl = document.getElementById("idofpivotcontrol").winControl;
            var pivotControlLength = pivotControl.items.length;
            var selectedIndex = pivotControl.selectedIndex;
        });
    }