zoukankan      html  css  js  c++  java
  • js监听屏幕的高度变化

    之前用VUE写完一个聊天界面,对于ios的效果该优化的地方都已经优化,且已上线。现在因项目需要,在另外一个angularjs+ionic的框架也要写一个聊天页面,目前还在开发中,发现忘记了一些很关键的东西,所以先备个份:

    1.当屏幕发生高度变化(其实是当软键盘打开的时候,窗口的高度发生了变化)

    window.onresize = () =>{

      //只要窗口高度发生变化,就会进入这里面,在这里就可以写,回到聊天最底部的逻辑

    }

    2.vue的写法,把上面的方法写在了mounted里面,然后return 窗口可视范围的高度并存在变量里面,然后watch里面去监听这个变量,变量变化>>>回到底部:滚动容器.scrollTop = 滚动容器.scrollHeight;

    3.对于angularjs+ionic是以下方法(打开软键盘,窗口变化,滚动到底部):

    window.onresize = function(){

      $scope.$apply(function(){

        $ionicScrollDelegate.resize();

        $ionicScrollDelegate.scrollBottom();

      })

    }

    4.对于很多疑问关于软键盘发送信息之后,软键盘关闭。需求想要的效果是发送信息之后,软键盘不会自动收起来。我的做法是用label,在发送按钮用label标签。如下(vue):

    <input id="modalText" type="text" v-model="chartMsg">

    <label for="modalText" @click="sendMsg">发送</label>

    以上,angularjs也是类似这样的写法(运用label标签for和input绑定)。

  • 相关阅读:
    Linux下SSH的Log文件路径
    Linux下压缩与解压命令tar
    Linux命令之at
    Linux下nice/renice命令小结
    Linux命令详解nice
    LVM---动态调整磁盘容量
    VT100字体
    Linux命令之WC
    for name in loop Shell
    Bind9用view配主从
  • 原文地址:https://www.cnblogs.com/start-ming/p/12022843.html
Copyright © 2011-2022 走看看