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绑定)。

  • 相关阅读:
    error: device not found
    RK3288 查看时钟树
    GPS数据包格式解析
    Android 操作文件系统失败: Read-only file system
    Ubuntu 14.04 配置安卓5.1编译环境
    升级 php composer 版本
    清理 laravel blade 模板缓存
    Laravel collection 报错 join(): Invalid arguments passed
    Laravel firstOrNew 与 firstOrCreate 的区别
    执行 crontab 的计划任务
  • 原文地址:https://www.cnblogs.com/start-ming/p/12022843.html
Copyright © 2011-2022 走看看