vue

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>

上一篇下一篇

猜你喜欢

热点阅读