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

  • 相关阅读:
    yzoj P2344 斯卡布罗集市 题解
    yzoj P2350 逃离洞穴 题解
    yzoj P2349 取数 题解
    JXOI 2017 颜色 题解
    NOIP 2009 最优贸易 题解
    CH 4302 Interval GCD 题解
    CH4301 Can you answer on these queries III 题解
    Luogu2533[AHOI2012]信号塔
    Luogu3320[SDOI2015]寻宝游戏
    Luogu3187[HNOI2007]最小矩形覆盖
  • 原文地址:https://www.cnblogs.com/start-ming/p/12022843.html
Copyright © 2011-2022 走看看