Vux-ui的ViewBox的坑
时间：2023-04-02 15:45:35
HTML
链接https://doc.vux.li/zh-CN/comp...这个组件有100%的高布局，可以解决一些键盘输入问题，但同时它在safari中会显示url工具栏和底部栏在向下滚动时无法自动隐藏的问题。元素在viewBox中定位为absolute，效果相当于fixed。使用时需要将html和body的高度设置为100%：html,body{height:100%;宽度：100%；溢出-x：隐藏；}视图框的所有父div的高度也需要为100%：
如果想节省滚动距离，建议使用vuex来实现，在特定路径监听scrollBody上的滚动事件，获取滚动距离和将其保存在vuex状态。比如可以参考vux源码的App.vue。现在使用vue的keep-alive来完成记录列表的滚动条问题。watch:{$route(to,from){letscrTop=this.$refs.viewBox.getScrollTop()//从列表到特定文章时保存之前的滚动距离if(to.name==='detail'){this.$refs.viewBox.scrollTo(0)console.warn('从列表到特定文章时保存之前的滚动距离Distancefromthis.$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('Returnlistfromarticlethis.states.scrollTop:'+store.getters.scroll_top)//this.$refs.viewBox.scrollTo(store.getters.scroll_top)}}}之前没有加this.$nextTick，滚动位置一直不对，今天分享到这里
