vux-ui的ViewBox的坑

链接 https://doc.vux.li/zh-CN/components/view-box.html

该组件为100%高布局，可以解决部分键盘输入的问题，但是同时会在safari中出现向下滚动时无法自动隐藏url工具栏和底部栏的问题。

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

使用时需要设置 html, body 高为100%:

 

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

 

view-box所有父div也需要为100%高度：

如果你想保存滚动距离，推荐使用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 滚动位置一直不对 今天分享到这里

转载 https://www.51csdn.cn/article/317.html