vux-ui的ViewBox的坑

2023年1月21日 203次阅读 来源: exception

链接 https://doc.vux.li/zh-CN/comp…

该组件为100%高规划，能够处理部份键盘输入的题目，然则同时会在safari中涌现向下转动时没法自动隐藏url工具栏和底部栏的题目。

在viewBox里元素定位为absolute，结果等同于fixed。

运用时须要设置 html, body 高为100%:

html, body {
height: 100%;
width: 100%;
overflow-x: hidden;
}

view-box一切父div也须要为100%高度：

<div style=”height:100%;”>
<view-box ref=”viewBox”>

<x-header slot="header" style="width:100%;position:absolute;left:0;top:0;z-index:100;"></x-header>
<router-view></router-view>
<tabbar slot="bottom"></tabbar>

</view-box>
</div>

假如你想保留转动间隔，引荐运用vuex完成，在特定path对scrollBody监听scroll事宜，并猎取转动间隔保留到vuex的state里。示例能够参考vux源码的App.vue

如今就是运用 vue 的keep-alive来完成纪录列表转动条题目

watch: {

  $route (to, from) {
    let scrTop = this.$refs.viewBox.getScrollTop()
    // 从列表到详细文章时保留之前的转动间隔
    if (to.name === 'detail') {
      this.$refs.viewBox.scrollTo(0)
      console.warn('从列表到详细文章时保留之前的转动间隔 this.$refs.viewBox.getScrollTop: ' + scrTop)
      this.$store.commit('SetScrollTop', scrTop)
    }
    // 从文章退回列表跳转到之前的位置
    if (from.name === 'detail') {
      this.$nextTick(() => {
        this.$refs.viewBox.scrollTo(store.getters.scroll_top)
      })
      console.warn('从文章退回列表 this.states.scrollTop: ' + store.getters.scroll_top)

// this.$refs.viewBox.scrollTo(store.getters.scroll_top)

    }
  }
}

我之前没加 this.$nextTick 转动位置一向不对 本日分享到这里

    原文作者：exception
    原文地址: https://segmentfault.com/a/1190000017500142
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞