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

HERE您可以找到一个有效的CodePen示例，其中包含相关代码。

＆＃13;

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

＆＃13;

希望它有所帮助！

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

1 个答案: