Vue, App与我(七)

一时失言乱红尘 2022-06-10 11:46 152阅读 0赞

# Vue, App与我(七) #

*  评论框的书写：
    
     *  要用前端的代码书写一个适合与所有移动端的手机设备，想到了几种解决的方式，但是都不太适用，但是还是想要把这几种方式更新出来，供大家评判一下我这个失败之笔的。

--------------------

*  js来书写评论框的位置：
 *  a、用定位来解决：

*  这是获取浏览器的位置，判断位置来确定定位的方式，当手机键盘出现的时候，这个页面也就会重新定位，也就是`resize`, 但是不同手机上的手机键盘出现的方式和方法都不一样， 比如华为手机会出现一个虚拟界面，手机键盘会随着**虚拟界面**的变化，手机键盘出现的时候会在虚拟界面上，虚拟界面下去也会改变页面的效果。如图所示：
    
    ![华为手机桌面][SouthEast]
 *  感觉有了这张图，就比较好明白我的意思了，但是有一个情况就是写的项目在浏览器里面打开，这种方式的处理又是没有问题的，所以在本地随便写了一个输入框进行浏览器中的测试，输入框在浏览器中打开都是不存在问题的，Big-man遇到了这个问题也是非常大的疑惑。后来他进行了排除思考，觉得是因为浏览器中对于手机键盘和虚拟界面进行了处理然后再调用本地的代码，就不会出现差乱了。

--------------------

*  b、改变可视区域的高度：

var localHeight = $("section").height(); // 获取可视区域的高度
    $("input, textarea").focus(function() { 
        var keyboardHeight = localHeight - $("section").height(); // 获取键盘的高度
        var keyboardY = localHeight - keyboardHeight;
        var addBottom = (parseInt($(this).position().top) + parseInt($(this).height())); // 文本域的底部
        var offset = addBotton - keyboardY; // 计算上滑的距离
        $("section").scrollTop(offset);
    });

*  这个的原理就是手机键盘的高度判断出来，然后页面向上滚动手机键盘的距离就可以了，但是在适配手机端的所有机型的时候，Big-man又遇到了一些问题，iOS的手机上的问题。对于类似于Big-man现在在做的是一款WebApp项目，也就是所谓的你在浏览器中也是可以访问的网站，所以在iOS的页面会出现页面可以滑动的情况，也就是**评论框**出现在iOS的手机上进行上下滑动的效果。这让Big-man有点“丈二的和尚，摸不着头脑了”。如图所示：  
    ![ios][]
 *  评论框在下面，ios可以滑动出现评论框，但是正常的情况不会出现这样的情况。

--------------------

*  c、`display: flex;`**流式布局**来尝试解决此bug：

.chatting {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    
        .chatting-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 50px;
          width: 100%;
          background-color: $blue;
          color: white;
          padding-left: 10px;
          padding-right: 15px;
    
          .chatting-back {
            width: 32px;
            height: 32px;
            .icon-back {
              background: url('../../common/icons/icon-ai.svg') no-repeat;
              background-size: contain;
            }
            .icon-back2 {
              background: url('../../common/icons/icon-ai2.svg') no-repeat;
              background-size: contain;
            }
          }
    
          .chatting-title {
            i.icon-group {
              vertical-align: top;
              width: 30px;
              height: 30px;
              background: url('../../common/icons/icon-group.svg') no-repeat;
              background-size: contain;
              margin-right: 3px;
            }
          }
    
          .chatting-menu {
            width: 30px;
            height: 30px;
            i.icon-menu {
              background: url('../../common/icons/icon-index.svg') no-repeat;
              background-size: contain;
            }
          }
        }
    
        .chatting-content {
          flex: 1;
          width: 100%;
          background-color: rgba(0, 0, 0, .1);
          overflow: auto;
          .chatting-item {
            padding: 10px;
            width: 100%;
            .msg-date {
              text-align: center;
              color: gray;
              font-size: 80%;
            }
            .msg-from {
              display: flex;
              align-items: center;
              span.loc {
                color: gray;
                font-size: 60%;
                margin-right: 5px;
              }
              .msg-author {
                font-size: 1.2rem;
              }
              img {
                width: 30px;
                height: 30px;
                border-radius: 15px;
              }
            }
            .msg-content {
              margin-top: 5px;
              background-color: white;
              width: 200px;
              padding: 6px 10px;
              border-radius: 10px;
            }
          }
    
          .chatting-item + .chatting-item {
            margin-top: 10px;
          }
          .self {
            .msg-from {
              display: flex;
              justify-content: flex-end;
              align-items: center;
              img {
                margin-left: 10px;
              }
            }
    
            .msg-content {
              float: right;
              word-wrap: break-word;
              word-break: break-all;
              margin-right: 10px;
            }
    
    
          }
    
          .other {
            .msg-from {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              span.loc {
                color: gray;
                font-size: 60%;
                margin-right: 5px;
              }
              img {
                margin-right: 10px;
              }
            }
    
            .msg-content {
              float: left;
              margin-left: 10px;
              word-wrap: break-word;
              word-break: break-all;
            }
    
          }
    
          .online {
            width: 200px;
            // max-width: 100%;
            margin: 3px auto;
            border-radius: 4px;
            text-align: center;
            background-color: #FFFDE7;
          }
    
    
        }
    
        .chatting-input {
          position: relative;
          display: flex;
          height: 40px;
          width: 100%;
          .emoji-display {
            position: absolute;
            width: 100%;
            height: 210px;
            background-color: white;
            top: -210px;
            left: 0;
              overflow-y: auto;
            ul {
              display: flex;
              flex-wrap: wrap;
    
              li {
                padding: 2px 3px;
                font-size: 2.2rem;
              }
            }
          }
          .emoji {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 45px;
            height: 100%;
            background-color: rgba(0, 0, 0, .1);
            .icon-emoji {
              width: 40px;
              height: 100%;
              background: url('../../common/icons/icon-emoji.svg') no-repeat;
              background-size: contain;
    
            }
          }
    
          textarea {
            flex: 1;
            resize: none;
            padding-left: 3px;
            padding-top: 7px;
            padding-right: 3px;
            height: 100%;
            font-size: 1.4rem;
          }
          button {
            width: 60px;
            height: 100%;
            background-color: $blue;
            color: white;
            font-size: 16px;
          }
        }
      }

*  `display: flex;` : display 属性规定元素应该生成的**框**的类型。框的类型就有**横框**和**竖框**，Big-man所想的这个页面是竖直的布局，所以使用了`flex-direction: column;`也就是列框来进行布局，至于详细的流式布局，可以参见[阮大神的blog][blog]。
 *  Big-man在这里尝试地就是这样的做法，`webApp`项目在浏览器中打开是为这样的:  
    ![chatting][]
 *  这是在不同手机机型上单独**访问这个文件也就是这个链接**都会存在评论框和手机键盘的位置处理正常的效果，但是应用到软件中的时候就会出现错乱的效果，出现这个问题的原因也就是上述所说的webApp对于适配的手机机型存在较大的差异。

--------------------

*  所以需要去研究一下用`native`的思想来进行这个问题的解决。

--------------------

> Jackdan9

[SouthEast]: /images/20220610/520bfc6d10b64ff7b48445fd8f75b3b1.png
[ios]: /images/20220610/969397281b5448f2a295f87fd44ccd3e.png
[blog]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[chatting]: /images/20220610/9449e3c70c08498585b1dca4179a33dd.png