美文网首页vue
van-popup使用van-nav-bar头部或底部无法固定问

van-popup使用van-nav-bar头部或底部无法固定问

作者: Computer_计算机 | 来源:发表于2020-12-21 10:10 被阅读0次

    一直遇到一个问题,使用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>
    
    

    相关文章

      网友评论

        本文标题:van-popup使用van-nav-bar头部或底部无法固定问

        本文链接:https://www.haomeiwen.com/subject/jrfrnktx.html