Question

我们正在创建移动应用程序，需要创建某种“android加载”效果。我试图画画，因为很难解释。

用户在向上滚动结束时
用户继续滚动（向上滑动页面）并且应该看到一个空白区域（标记为黄色）
用户释放手指和桌子正在反弹，隐藏空白区域。

我们所知道它在原生环境中是如何运作的，但在网络中重现相同的技术是什么？提前感谢任何建议。

Answer 1

你必须在列表的末尾添加一个Pseudo元素（有一些高度）。

现在在Javascript中检查此元素的偏移量是否高于屏幕底部并向上滚动以隐藏它（有一些延迟）。

同时隐藏滚动条，否则看起来有点奇怪。

Answer 2

好的，我们发现这是最简单，最快速的解决方案。目前为止。我不接受答案，因为我不喜欢这个解决方案（它仍然有效）。我认为sholud更优雅和本土化。

首先，您必须检测用户何时停止滚动。我和他在列表的最顶端，预计会有“反弹行为”。

    var $selector = $('some-your-selector'); //that's the list

            var $pullDownPlaceholder = $('<div class="js-pull-placeholder js-pull-down-placeholder"/>');
            var $pullUpPlaceholder = $('<div class="js-pull-placeholder js-pull-up-placeholder"/>');
            $selector.append($pullDownPlaceholder); //we append one placeholder with 0 height at the bottom of the list
            $selector.prepend($pullUpPlaceholder); //and prepend another one at the top of the list




    //We will need initial start up points X and Y, that we wrint in data properties to use later
    $selector.on('touchstart', function (e){

                    $(this).data('YonTouchStart', e.originalEvent.touches[0].clientY);
                    $(this).data('XonTouchStart', e.originalEvent.touches[0].clientX);

                });

    //When user moves the selector up or down we'll try to detect he has reached bottom or top in the scroll

    $selector.on('touchmove', function (e){

                    var $this = $(this);
                    var YonTouchStart = $this.data('YonTouchStart');
                    var XonTouchStart = $this.data('XonTouchStart');
                    var YonTouchEnd = e.originalEvent.changedTouches[0].clientY;
                    var XonTouchEnd = e.originalEvent.changedTouches[0].clientX;

                    var diffY = YonTouchEnd - YonTouchStart;
                    var diffX = XonTouchEnd - XonTouchStart;

                    var scrollHeight = $this.prop('scrollHeight');
                    var divHeight = $this.height();
                    var scrollerEndPoint = scrollHeight - divHeight;
                    var divScrollerTop =  $this.scrollTop();

                    var initted = null;

                    //user scrolled down to the bottom!
                    if(divScrollerTop === scrollerEndPoint)
                    {
                        initted = 'bottom';
//WE will use requestAnimationFrame almost everywhere because otherwise the productivity on mobile phone can be really poor
                        requestAnimationFrame(
                            function(){
//we close upper placeholder
                                $this.find('.js-pull-up-placeholder').height(0);
                            }
                        );

                    } else if (0===divScrollerTop) {
                        initted = 'top';
                        requestAnimationFrame(
                            function(){
//if we are on top we have to make sure we close lower placeholder
                                $this.find('.js-pull-down-placeholder').height(0);
                            }
                        );
                    }

    //Now we just set height of the placeholder 

                    var height = Math.abs(diffY);
                    if (initted == 'top') {
                        requestAnimationFrame(
                            function(){
                                $this.find('.js-pull-up-placeholder').height(height);
                            }
                        );
                    } else if (initted == 'bottom'){
                        requestAnimationFrame(
                            function(){
                                $this.find('.js-pull-down-placeholder').height(height);
                            }
                        );
                    }
                });



    //And finally - if user releases selector, we need to destroy placeholder
                $selector.on('touchend', function (e){

                    var $this = $(this);
                    requestAnimationFrame(
                        function(){
                            $this.find('.js-pull-placeholder').height(0);
                        }
                    );

                });

如何在网络中创建pullup和pulldown效果？

2 个答案: