van-popup使用van-nav-bar头部或底部无法固定问
2020-12-21 本文已影响0人
Computer_计算机
一直遇到一个问题,使用vant弹框里面有顶部导航栏和底部导航栏的时候,如果数据量多需要滚动页面的情况下,底部和顶部导航栏的位置会跟随移动。找了好久 一直没有找到解决的办法。今天自己终于弄出来了。
主要步骤:
1.首先给van-popup设置overflo:hidden(关键-不要让外层滚动)
2. 给你需要滚动的层加高度,并且加overflo:auto 就可以了
<van-popup v-model="show" position="bottom" :style="{ height: '95%', overflow: 'hidden' }">
<!-- 这里是头部-->
<van-nav-bar
title="全部回复"
class="dback-message"
:placeholder="true"
@click-left="onClickLeft"
>
<template #left>
<van-icon name="cross" size="18"/>
</template>
</van-nav-bar>
<template>
<div class="dback-all" style="height:90%; overflow: auto;">
这是内容也是,滚动区域
</div>
</template>
<!-- 这里是底部 设置一下它的样式 positon:fixed; bottom:0-->
<van-field
v-model="backMessage"
rows="1"
:autosize= "{ maxHeight: 80, minHeight: 40 }"
class="dtextarea"
type="textarea"
:placeholder="'你想对'+childTop.userName+'说点什么...'"
>
<template #button>
<van-button type="info" @click="onBackSubmit(childTop.id)" class="backSecound">回复</van-button>
</template>
</van-field>
</van-popup>