1.vant的swipe组件问题
由于公司要做一个全屏轮播切换的效果,并在APP中嵌入使用,在前端使用Vue的前提下,框架选择使用vant,但是在使用vant
的swipe组件过程中,出现一个特殊的情况:
当界面中input获取到焦点并输入值后,APP软键盘弹出,将界面推了上去,但是在收回软键盘之后,被顶上去的界面无法下来,导致后续的轮播界面上升,整个界面布局产生错乱。
解决方案:在经过排查之后发现,是APP端的软键盘占据了空间,导致界面自适应计算了高度,导致高度减少了,针对这种问题,需要在整个界面最大的div框中设置高度,代码如下
<template>
<div class="light-test" :style="'min-height:' + setDivHeight + 'px' ">
/*你的代码块*/
</div>
</template>
<script>
created(){
this.setDivHeight = document.body.offsetHeight;
},
</script>
设置完这个最小高度之后,该问题解决
2.关于vant中部分标签@click不生效问题
在开发过程中,发现部分vant标签@click无法执行对应的函数,经过一系列尝试后发现解决方法:
将@click 写成@click.native即可解决该点击问题