Scrollview Pull to Refresh Famo.us

Question

I'm trying to implement a pull to reload/refresh type effect, that you see in lots of apps, with scrollview. I've got multiple pain points on this.

Just stopping a scrollview past where it wants to sit is a pain. Setting velocity or speed limit doesn't work, just setting the position just makes it bounce because it wants to continue back.

Then setting up an event call that doesn't just fire when they scroll too hard up while doing their normal browsing.

If anyone has thoughts on how to accomplish this I'd appreciate it. If I don't get any responses in a day I'll start posting my specific attempts and where they fell short. I can't believe I'm the only one trying to implement this pretty common feature.

Answer 1

I finally have a solution for you. It relies only on start, and end events of the scrollview sync. To start you will see the scrollview.reset function. This function is taken for scrollviews internals to return _scroller to its default behavior.

We will use a transitionable and scrollview._scroller.positionFrom to control the behavior of the scrollview when it should not be default. Essentially everything is normalized on scrollview.sync.on 'start' and the update is carried out on scrollview.sync.on 'end' if the position of the scrollview has reached the refresh offset.

Much of the functionality is tied to the fact that I am using a timeout to simulate the load time of the refresh. It may be more appropriate to have a variable that is keeping track of whether a request is still being made.

Anyway, I hope this gives you some ideas.. Here is the full example.

var Engine          = require('famous/core/Engine');
var Surface         = require('famous/core/Surface');
var Transform       = require('famous/core/Transform');
var Scrollview      = require('famous/views/Scrollview');
var Transitionable  = require('famous/transitions/Transitionable');
var SnapTransition  = require('famous/transitions/SnapTransition');

Transitionable.registerMethod('snap',SnapTransition);

var snap = { method:'snap', period:200, dampingRatio:0.4 }

var context = Engine.createContext();

var scrollview = new Scrollview();
var surfaces = [];

scrollview.sequenceFrom(surfaces);

for (var i = 0; i < 20; i++) {
    var surface = new Surface({
         size: [undefined, 200],
         properties: {
             backgroundColor: "hsl(" + (i * 360 / 20) + ", 100%, 50%)",
         }
    });

    surface.pipe(scrollview);
    surfaces.push(surface);
}

scrollview.trans = new Transitionable(0);

// Timeout that will simulate loading time
scrollview.timer = null; 

// Total simulated load time
scrollview.timeout = 500;

// Vertical offset scrollview will start load at
scrollview.refreshOffset = 100;

// Reset scroller to default behavior
scrollview.reset = function(){
    scrollview._scroller.positionFrom(scrollview.getPosition.bind(scrollview));
}

scrollview.sync.on('start',function(){

    clearTimeout(scrollview.timer);

    scrollview.trans.halt();

    var pos = scrollview.trans.get()

    if (pos != 0) scrollview.setPosition(pos);

    scrollview.reset()

});

scrollview.sync.on('end',function(){

    var pos = scrollview.getPosition();

    if (pos < (-scrollview.refreshOffset)) {

        scrollview.trans.halt();
        scrollview.trans.set(pos);

        scrollview._scroller.positionFrom(function(){
            return scrollview.trans.get();
        });

        scrollview.trans.set(-scrollview.refreshOffset,snap,function(){
            scrollview.timer = setTimeout(function(){
                scrollview.trans.halt();
                scrollview.trans.set(0,snap,function(){
                    scrollview.reset()
                });

            }, scrollview.timeout );
        });

    } else {
        scrollview.trans.halt();
        scrollview.trans.set(0);
    }
});

context.add(scrollview);

Answer 2

You could use the FlexScrollView which supports this feature out of the box (it is nearly impossible to do it right with the stock famo.us scrollview..):

var FlexScrollView = require('famous-flex/FlexScrollView');
var RefreshLoader = require('famous-refresh-loader/RefreshLoader');

var scrollView = new FlexScrollView({
    autoPipeEvents: true,
    pullToRefreshHeader: new RefreshLoader({
        size: [undefined, 60],
        pullToRefresh: true,
        color: 'green',
        backgroundColor: 'white',
        particleCount: 8,
        particleSize: 7
    })
});

Demo: https://rawgit.com/IjzerenHein/famous-flex-chat/master/dist/index.html

Repo: https://github.com/IjzerenHein/famous-flex

RefreshLoader: https://github.com/IjzerenHein/famous-refresh-loader

Tutorial: https://github.com/IjzerenHein/famous-flex/blob/master/tutorials/FlexScrollView.md