vux-ui 的 ViewBox 的坑

該元件為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 滾動位置一直不對今天分享到這裡

轉載 https://www.51csdn.cn/article/317.html

本作品採用《CC 協議》，轉載必須註明作者和本文連結

vux-ui 的 ViewBox 的坑

相關文章