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

  • 相关阅读:
    转:SkipList跳表
    git操作
    JAVA小工具打包
    Java数字证书操作
    mysql创建数据库和用户
    解决node-sass安装不了的问题
    vscode + angular
    ng2 quickstart-primeng
    ng2 quickstart
    使用淘宝的npm代理下载模块
  • 原文地址:https://www.cnblogs.com/start-ming/p/12022843.html
Copyright © 2020-2023  润新知