Onsen-UI,如何编写javascript,在底部保持ons-scroller？

Question

如何编写javascript,在底部保持ons-scroller？

我的代码:

        <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

只需创建ons-scroller并使用 来设置他的样式属性position: absolute; bottom: 0px"。

在这里您可以找到一个有效的 CodePen 示例以及相关代码。

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

希望能帮助到你！