话不多说,直接上代码。
你的页面布局可能是这样的
<template>
<view>
<view class="top">
<input type="text">
</view>
<view class="con">
内容
</view>
<view class="bottom">
</view>
</view>
</template>
当内容可以滚动后,input在被点击时,里面的内容会被顶上去,只需要改一下con的标签就可以。
我们只需要将内容放在scroll-view标签中即可不让外面的input受到滚动的影响
具体代码如下:
<template>
<view class='box'>
<view class="top">
<input type="text">
</view>
<scroll-view class="con" :scroll-y="true" @scrolltolower='refresh_page_data(list)'>
内容
</scroll-view>
<view class="bottom">
</view>
</view>
</template>
<script>
</script>
<style>
.box{
display:flex;
flex-direction: column;
height: 100vh;
}
//top可以给高度,也可以不给
.top{}
.con{
flex:1
}
</style>