Question

我正在尝试使用scrollview实现一个pull to reload / refresh类型效果，你可以在许多应用中看到它。我有很多痛点。

只是停止滚动视图到达它想要坐的位置是一种痛苦。设置速度或速度限制不起作用，只是设置位置只是让它反弹，因为它想继续回来。

然后设置一个事件调用，当他们在正常浏览时滚动太猛烈时不会触发。

如果有人想过如何做到这一点，我会很感激。如果我在一天内没有收到任何回复，我会开始发布我的具体尝试，以及他们在哪些方面做得不够。我无法相信我是唯一一个试图实现这个非常常见的功能的人。

Answer 1

您可以使用支持此功能的FlexScrollView（使用库存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
    })
});

演示：https://rawgit.com/IjzerenHein/famous-flex-chat/master/dist/index.html

回购：https://github.com/IjzerenHein/famous-flex

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

教程：https://github.com/IjzerenHein/famous-flex/blob/master/tutorials/FlexScrollView.md

Answer 2

我终于有了解决方案。它仅依赖于scrollview同步的开始和结束事件。首先，您将看到scrollview.reset函数。此函数用于scrollviews内部，以使_scroller返回其默认行为。

我们将使用可转换和scrollview._scroller.positionFrom来控制scrollview的行为，因为它不应该是默认的。基本上所有内容都在scrollview.sync.on＆＃39; start＆＃39;上进行了规范化。并且更新是在scrollview.sync.on＆＃39; end＆＃39;上执行的。如果scrollview的位置已达到刷新偏移量。

许多功能都与我使用超时来模拟刷新的加载时间这一事实有关。拥有一个跟踪是否仍在进行请求的变量可能更合适。

无论如何，我希望这会给你一些想法..这是完整的例子。

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);

Scrollview Pull to Refresh Famo.us

2 个答案: