Initial location of ons-list

I'm creating an application using ons-list, but when I start, I want to start it with the list scrolling to the bottom. Is there a good way?

monaca onsen-ui

2022-09-30 20:56

1 Answers

You can scroll to the bottom by using AngularJS's $location.hash and $anchorScroll as shown in the URL below.
The problem is that there is a momentary scrolling movement at startup and the id at the bottom of the ons-list-item?

Reference URL https://teratail.com/questions/2879

index.html

<!DOCTYPE HTML>
<htmlla="ja">
<head>
    <metacharset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scale=no">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <script>
var app=ons.bootstrap("myApp", ["onsen"));
app.controller("page1Controller",["$scope","$location","$anchorScroll", function($scope,$location,$anchorScroll){
    ons.ready(function(){
        $location.hash("scrollBottom");
        $anchorScroll();
    });
}]);
    </script>
</head>
<body>
    <ons-navigator var="myNavigator" page="page1.html">
    </ons-navigator> 
</body>
</html>

page1.html

<ons-pageing-controller="page1Controller">
    <ons-toolbar>
        <div class="center"> Navigator</div>
    </ons-toolbar>
    <ons-scroller style="width:100%;height:200px;">
        <ons-list>
            <ons-list-item modulator="chevron">
                1. aaaa
            </ons-list-item>
            <ons-list-item modulator="chevron">
                2.bbb
            </ons-list-item>
            <ons-list-item modulator="chevron">
                3.ccc
            </ons-list-item>
            <ons-list-item modulator="chevron">
                4.ddd
            </ons-list-item>
            <ons-list-item modulator="chevron">
                5.eee
            </ons-list-item>
            <ons-list-item modulator="chevron">
                6.ffff
            </ons-list-item>
            <ons-list-item modulator="chevron">
                7.ggg
            </ons-list-item>
            <ons-list-item modulator="chevron">
                8.hhh
            </ons-list-item>
            <ons-list-item modulator="chevron">
                9.iii
            </ons-list-item>
            <ons-list-item modulator="chevron" id="scrollBottom">
                10.jjj
            </ons-list-item>
        </ons-list>
    </ons-scroller>
</ons-page>

2022-09-30 20:56

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656