【问题标题】:Onsen UI: Automatic scroll with ons-listOnsen UI:使用 ons-list 自动滚动
【发布时间】:2015-09-03 08:14:23
【问题描述】:

我想编写一个 WhatsApp 风格的聊天程序。 最新消息将显示在下方,新消息将自动向下滚动。 谁能帮助我如何实现 ons-list 的自动滚动?

<ons-template id="chat.html">
    <ons-page ng-controller="ChatController">
        <ons-toolbar>
            <div class="left"><ons-back-button>Back</ons-back-button></div>
            <div class="center">Chat</div>
        </ons-toolbar>

        <ons-list style="margin-top: 10px" scroll-glue>
            <ons-list-item class="item" ng-repeat="msg in messages">
                <header>
                    <span class="item-title">{{msg.user}}</span>
                </header>
                <p class="item-desc">{{msg.msg}}</p>
            </ons-list-item>
        </ons-list>
    </ons-page>
</ons-template>

【问题讨论】:

    标签: onsen-ui


    【解决方案1】:

    我没有使用过 WhatsApp,但这可能会有所帮助。在ons-page 中,您可以使用.page__contentscrollTop 属性进行自动滚动。如下所示。它使用 jQuery 制作动画。

    ons.bootstrap()
    .controller('ChatController', function($scope, $timeout){
      $scope.messages = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
      $timeout(function(){
        $('.page__content').animate({scrollTop: $('.ons-list-inner').height()}, 2000)
        .animate({scrollTop: 0}, 2000);
      });
    });
    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/css/onsen-css-components.css" rel="stylesheet"/>
    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/css/onsenui.css" rel="stylesheet"/>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/js/angular/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/js/onsenui.min.js"></script>
    
    <ons-navigator page="chat.html"></ons-navigator>
    
    <ons-template id="chat.html">
        <ons-page ng-controller="ChatController">
            <ons-toolbar>
                <div class="left"><ons-back-button>Back</ons-back-button></div>
                <div class="center">Chat</div>
            </ons-toolbar>
    
            <ons-list style="margin-top: 10px" scroll-glue>
                <ons-list-item class="item" ng-repeat="msg in messages">
                    <header>
                        <span class="item-title">{{msg.user}}</span>
                    </header>
                    <p class="item-desc">{{msg.msg}}</p>
                </ons-list-item>
            </ons-list>
        </ons-page>
    </ons-template>

    【讨论】:

    • 感谢您的帮助。
    • 感谢您的帮助,但代码为 $('.page__content').animate({scrollTop: 1000}, 2000);它每次滚动到 1000px 的位置。使用 $(document).height() 它不断获得 646 像素。它是 ons-page 的初始高度。当 DOM 发生变化时(新的 ons-list-item 添加),它的高度相同。但随后我将向下滚动到页面末尾。如何获得正确的页面高度?
    • 我编辑了我的代码。 &lt;ons-list&gt; 的高度是所有 &lt;list-item&gt;s 的总和,所以这将起作用。请注意,我用$timeout 包装了我的动画代码。这是因为你必须等到 dom 加载完成才能计算高度。
    • @quersumme 如果您认为它有效,请接受此答案。
    猜你喜欢
    • 2015-09-27
    • 1970-01-01
    • 2018-12-09
    • 2015-06-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多