在安卓机上 键盘弹起影响定位的弹框显示

原因：是因为安卓手机 键盘弹起屏幕的实际高度发生了变化 使定位的弹框位置发生了改变

解决办法：

<template>
    <!-- <div class="alertContentAddress" @click="closeSearch"> -->
        <div class="alertContent" @click="closeSearch">
            <div class="alertBody" @click.stop="">
                <!-- <div class="arertHeader">
                    选择城市
                    <span @click="closeDate"></span>
                </div> -->
                <div class="searchAddressCon">
                    <div class="searchAddress">
                        <i></i>
                        <!-- <input type="text" ref="inpSear" id="txcode" @click="changeHeight"  v-model="key"  placeholder="搜索城市中文、拼音、三字码" /> -->
                        <input type="text" ref="inpSear" id="txcode" @focus="changeHeight"  v-model="key"  placeholder="搜索城市中文、拼音、三字码" />
                        <span v-if="key != ''" @click="clearKey"></span>
                    </div>
                    <div  @click="closeSearch" class="closeSearch">取消</div>
                </div>
                <div class="border2px"></div>
                <div class="dataContents" v-if="addressArr.length">
                    <div class="searchContent" v-for="(item,index) in addressArr" :key="index">
                        <div  v-if="item.air">
                            <div class="cityName" @click="choseCity(item.Name,item.CityCode,item.Name)">
                                <span class="cityType">城市</span>
                                <span class="cityNameShow">{{item.Name}}</span>
                                <span>{{item.CityCode}}</span>
                            </div>
                            <ul class="planeList">
                                <li v-for="(itemChild,indexChild) in item.air" :key="indexChild" @click="choseCity(itemChild.AirportName,itemChild.Code,item.Name)" vclass="cityChildrenName">
                                    <span class="planeType">机场</span>
                                    <span>{{itemChild.AirportName}}</span>
                                    <span>{{itemChild.Code}}</span>
                                </li>
                            </ul>
                        </div>
                        <div  v-else>
                            <div v-if="item.type === 1" class="cityName" @click="choseCity(item.Name,item.CityCode,item.Name)">
                                <span class="cityType">城市</span>
                                <span class="cityNameShow">{{item.Name}}</span>
                                <span>{{item.CityCode}}</span>
                            </div>
                            <div v-else class="cityName" @click="choseCity(item.AirportName,item.Code,item.Name)">
                                <span class="cityType">机场</span>
                                <span class="cityNameShow">{{item.AirportName}}</span>
                                <span>{{item.Code}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dataContents" v-if="addressArr.length == 0">
                    <div class="searchNoList"  v-if="addressArr.length == 0 && key != ''">
                        <div><img src="../../../resource/images/plane/images/kongBaiSearch.png" alt=""></div>
                        <div>没有符合的结果</div>
                    </div>
                </div>
            </div>
        </div>
    <!-- </div> -->
</template>

View Code

<style scoped>
    /* 查询唯空 */
    .searchNoList{ text-align: center;}
    .searchNoList img{ width: 60%;margin: 20px;}
    .searchNoList{ text-align: center;color: #666666;font-size: 16px;}
    /* end */
    .alertContentAddress{
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 112;
        background-color: rgba(0, 0, 0, 0.5);
    }
    .alertContent{
        position: fixed;
        /* top: calc(30vh - 144px); */
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 112;
        background-color: rgba(0, 0, 0, 0.5);
    }
    .alertBody{
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        padding-bottom: 10px;
        background-color: #ffffff;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }
    .indexsTop{
        position: absolute;
        right: 20px;
        bottom: 60px;
        width: 60px;
        height: 60px;
        /* line-height: 60px; */
        border-radius: 30px;
        overflow: hidden;
        background-color: #fdfffe;
        box-shadow: 0px 2px 10px 0px
        rgba(0, 0, 0, 0.1);
        text-align: center;
    }
    .topJiantou{
        width: 60px;
        height: 32px;
        background: url('../../../resource/images/plane/upjt.png') 15px 7px no-repeat;
        background-size: contain;
    }
    .topwenzhi{
        width: 60px;
        height: 30px;
        color: #f08200;
        font-size: 12px;
    }
    .arertHeader{
        position: relative;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #333333;
        font-size: 16px;
    }
    .arertHeader span{display: inline-block;position: absolute;right: 8px;top:8px;width: 30px;height: 30px;    background: url(/static/img/empty.c4cebbd.png) 0 5px no-repeat;background-size: 20px 20px;}
    .searchAddressCon{
        padding: 20px 30px;
        display:  flex;
        justify-content: space-between;
    }
    .closeSearch{
        height: 40px;
        line-height: 40px;
        /* flex: 1; */
        text-align: center;
        color: #333333;
        font-size: 14px;
    }
    .searchAddress{
        position: relative;
        background-color: #f6f6f6;
        /* flex: 3; */
        width: 87%;
        height: 40px;
        line-height: 40px;
        padding: 0px 30px;
        border-radius: 20px;
        overflow: hidden;
        color: #a2a2a2;
        font-size: 13px;
    }
    .searchAddress i{
        display: inline-block;
        height: 20px;
        width: 20px;
        background: url('../../../resource/images/scenic/index/seek.png') 0 0 no-repeat;
        background-size: contain;
        vertical-align: middle;
        margin-top: -2px;
        margin-right: 6px;
    }
    .searchAddress span{
        position: absolute;
        top: 10px;
        right: 10px;
        display: inline-block;
        height: 20px;
        width: 20px;
        background: url('../../../resource/images/plane/images/close.png') 0 0 no-repeat;
        background-size: contain;
        vertical-align: middle;
    }
    .searchAddress input{
        width: 80%;
        background-color: #f6f6f6;
        height: 27px;
        line-height: 27px;
        color: #333333;
        font-size: 12px;
    }
    .dataContents {
        background-color: #ffffff;
        width: 100%;
        overflow: hidden;
        height: calc(70vh + 54px);
        /* height: calc(70% + 54px); */
        overflow: scroll;
        padding: 0px 20px;
    }
    .searchContent{
        font-size: 13px;
        color: #333333;
    }
    .searchContent span{
        font-size: 13px;
        color: #333333;
    }
    .cityName .cityType{
        display: inline-block;
        padding: 2px 4px;
        background-color: #f75b11;
        border-radius: 4px;
        color: #ffffff;
        font-size: 10px;
    }
    .cityName {
        padding: 10px 0px;
        border-bottom: 1px solid #f0f0f0;
    }
    .planeList li{
        padding: 10px 0px;
        padding-left: 20px;
        border-bottom: 1px solid #f0f0f0;
    }
    .searchContent .planeType{
        display: inline-block;
        padding: 2px 4px;
        border-radius: 4px;
        color: #fc7d41;
        border: solid 1px #fc7d41;
        font-size: 10px;
    }
</style>

View Code

<script>
import { getSearchAddress } from '../../../api/plan/index'
export default {
    props:[],
    data(){
        return{
            key: '',
            addressArr: [],
            keyCode:''
        }
    },
    created(){
    },
    mounted(){
        // console.log('this.$refs')
        this.$refs.inpSear.focus()

    },
    watch:{
        // this.$refs.name.addEventListener('blur', function(){
        //     self.insName = self.$refs.name.value;
        // })
        key(val,oldval){
            this.keyCode = this.$refs.inpSear.value
            if(val != oldval){
                this.searchAddress()
            }
            // this.searchAddress()
        }
    },
    methods:{
        changeHeight(){
            this.$refs.inpSear.focus()
            //判断机型
            //    if ((/Android/gi).test(navigator.userAgent)) {
            //     var winHeight = $(window).height(); //获取当前页面高度 
            //     $(window).resize(function() {  
            //         var thisHeight = $(this).height();  
            //         //   console.log('thisHeight')
            //         // alert(thisHeight)
            //         // alert(winHeight)
            //         let changeHeiNum = winHeight - thisHeight
            //         if (changeHeiNum > 50) {  
            //             //当软键盘弹出，在这里面操作  
            //             //alert('aaa');  
            //             $('.dataContent').css('height', 'calc(70vh + 54px-'+changeHeiNum+'px)');
            //         } else {  
            //             //alert('bbb');  
            //             //当软键盘收起，在此处操作  
            //             $('dataContent').css('height', 'calc(70vh + 54px)');  
            //         }  
            //     });
            // }
        },
        closeSearch(){
            this.$emit('closeSearch')
        },
        chooseCity(val){
            this.$emit('chooseCity',val)
        },
        searchAddress() {
            // alert(this.keyCode)
            let params = {
                'key' : this.keyCode
            }
            this.addressArr = []
            if(this.key === ''){
                return false
            }
            getSearchAddress(params).then((res) =>{
                // console.log(res.data)
                if(res.data.code === 0){
                    this.addressArr = res.data.data
                }else{
                    this.$toast(res.data.msg)
                }
            })
        },
        clearKey(){
            this.key = '';
            this.addressArr = [];
            // this.$refs.inpSear.focus()
        },
        choseCity(name,code,city){
            this.$emit('choseCity',name,code,city)
        }
    }
}
var winHeight = $(window).height(); //获取当前页面高度  
          $(window).resize(function() {
              var thisHeight = $(this).height();
              console.log('thisHeight')
              console.log(thisHeight)
              console.log(winHeight)
            //   alert(thisHeight)
            //   alert(winHeight)
              let changeHeiNum = winHeight - thisHeight
              let div = document.getElementsByClassName("dataContents")[0];
            //   console.log(changeHeiNum)
              if (changeHeiNum > 50) {
                  //当软键盘弹出，在这里面操作  
                  div.style.height = "calc(70vh + 54px - "  + changeHeiNum/3 +"px)"
              } else {
                  //alert('bbb');  
                  //当软键盘收起，在此处操作  
                 div.style.height = "calc(70vh + 54px)";
              }
          });
</script>

View Code

描述：重点是改变高度

var winHeight = $(window).height(); //获取当前页面高度  
          $(window).resize(function() {
              var thisHeight = $(this).height();
              console.log('thisHeight')
              console.log(thisHeight)
              console.log(winHeight)
            //   alert(thisHeight)
            //   alert(winHeight)
              let changeHeiNum = winHeight - thisHeight
              let div = document.getElementsByClassName("dataContents")[0];
            //   console.log(changeHeiNum)
              if (changeHeiNum > 50) {
                  //当软键盘弹出，在这里面操作  
                  div.style.height = "calc(70vh + 54px - "  + changeHeiNum/3 +"px)"
              } else {
                  //alert('bbb');  
                  //当软键盘收起，在此处操作  
                 div.style.height = "calc(70vh + 54px)";
              }
          });