vux-ui的ViewBox的坑

exception發表於2019-02-16
UXUIView

連結 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 滾動位置一直不對 今天分享到這裡

相關文章