Onsen-UI, wie schreibe ich ein Javascript, halte den Ons-Scroller an der Unterseite?

Question

Wie schreibe ich ein Javascript, halten Sie ons-Scroller an der Unterseite?

dies mein Code:

 <ons-page > 
      <ons-toolbar> 
       <div class="left"><ons-back-button>返回</ons-back-button></div> 
       <div class="center">{{user_msg.title}}</div> 
      </ons-toolbar> 
      <ons-scroller id="scroll_msg" threshold="0" >  
       <div ng-repeat="msg in msg_history" 
      ng-class="getMsgClass(msg.uid)" > 
        <span ng-if="uid == msg.uid " >{{msg.msg}}</span> 
        <span ng-if="uid == msg.uid " style="color:#336699;">：{{msg.nickname}}</span> 
        <span ng-if="uid != msg.uid " style="color:#336699">{{msg.nickname}}：</span> 
        <span ng-if="uid != msg.uid " >{{msg.msg}}</span> 
       </div> 
      </ons-scroller> 


     <ons-bottom-toolbar> 
     <input type="text" class="text-input ng-pristine ng-valid ng-touched" 
    placeholder="文字信息" ng-model="user_msg.message" style="margin:6px;" value=""> 
    <button ng-click="sendUserMessage()">发送</button> 
    </ons-bottom-toolbar> 
     </ons-page> 

Answer 1

einfach die ons-scroller erstellen und sein Stil-Attribut mit position: absolute; bottom: 0px".

HERE können Sie ein funktionierendes CodePen-Beispiel mit dem entsprechenden Code finden.

<ons-navigator> 
 
    <ons-toolbar> 
 
    <div class="center">Scroller</div> 
 
    </ons-toolbar> 
 
    <ons-scroller style="height: 200px; width: 100%; border-bottom: 1px solid #ccc; background-color: white; position: absolute; bottom: 0px"> 
 
    <div style="text-align: center"> 
 
     <h2>I am now scrollable!</h2> 
 
     <h3>Happy scrolling!</h3> 
 
     <h3>Happy scrolling!</h3> 
 
     <h3>Happy scrolling!</h3> 
 
     <h3>Happy scrolling!</h3> 
 
     <h3>Happy scrolling!</h3> 
 
     <h3>Happy scrolling!</h3> 
 
     <h3>Happy scrolling!</h3> 
 
     <h3>Happy scrolling!</h3> 
 
     <h3>Happy scrolling!</h3> 
 
    </div> 
 
    </ons-scroller> 
 
</ons-navigator>

Hoffe, es hilft!