Pit of viewbox of vux UI


The component has a 100% high layout, which can solve some keyboard input problems, but at the same time, it can not automatically hide the URL toolbar and bottom bar when scrolling down in safari.

In the viewbox, the element is positioned as absolute, and the effect is equivalent to fixed.

When using, you need to set HTML, and the body height is 100%:

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

All parent divs of view box also need to be 100% high:

<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>
    <tabbar slot="bottom"></tabbar>

If you want to save the scroll distance, it is recommended to use vuex implementation. Listen for the scroll event on the scrollbody in a specific path, obtain the scroll distance and save it in vuex state. For examples, please refer to app.vue of vux source code

Now we use Vue’s keep alive to complete the scroll bar problem of the record list

watch: {
$route (to, from) {
let scrTop = this.$refs.viewBox.getScrollTop()
//Scroll distance before saving from list to specific article
if (to.name === ‘detail’) {
Console. Warn (‘scroll distance before saving from list to specific article this. $refs. Viewbox. Getscrolltop: ‘+ scrtop)
this.$store.commit(‘SetScrollTop’, scrTop)
//Jump from the post return list to the previous position
if (from.name === ‘detail’) {
this.$nextTick(() => {
Console. Warn (‘This. States. Scrolltop returned from article: ‘+ store. Getters. Scroll_top)
// this.$refs.viewBox.scrollTo(store.getters.scroll_top)
I didn’t add this. $nexttick before. The scroll position has been wrong. I’ll share it here today



This work adoptsCC agreement, reprint must indicate the author and the link to this article