vux-ui的ViewBox的坑

luodongseu 发布于2019-08-02 13:58 / 3365人阅读

摘要：链接该组件为高布局，可以解决部分键盘输入的问题，但是同时会在中出现向下滚动时无法自动隐藏工具栏和底部栏的问题。在里元素定位为，效果等同于。

链接 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%高度：

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

云服务器专线服务语言的坑爹设计阿里云服务器的坑 ViewBox 云服务器踩过的坑

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53478.html

vux-ui的ViewBox的坑

摘要：链接该组件为高布局，可以解决部分键盘输入的问题，但是同时会在中出现向下滚动时无法自动隐藏工具栏和底部栏的问题。在里元素定位为，效果等同于。链接 https://doc.vux.li/zh-CN/comp... 该组件为100%高布局，可以解决部分键盘输入的问题，但是同时会在safari中出现向下滚动时无法自动隐藏url工具栏和底部栏的问题。在viewBox里元素定位为absolut...

用户83 2019-08-30 15:55 评论0 收藏0
vux-ui的ViewBox的坑

摘要：链接该组件为高布局，可以解决部分键盘输入的问题，但是同时会在中出现向下滚动时无法自动隐藏工具栏和底部栏的问题。在里元素定位为，效果等同于。链接 https://doc.vux.li/zh-CN/comp... 该组件为100%高布局，可以解决部分键盘输入的问题，但是同时会在safari中出现向下滚动时无法自动隐藏url工具栏和底部栏的问题。在viewBox里元素定位为absolut...

voyagelab 2019-08-23 14:16 评论0 收藏0
[技術分享] 理解 SVG 中的 Viewport 和 ViewBox－拖曳與縮放功能實做（上）

摘要：註在這篇文章中我們只考慮和為等比例的情況。最後實做出來的功能會像這樣子實做拖曳與縮放瞭解中的和在的世界中，空間的概念可以分成和兩個部分。實際感受的效果在她所撰寫文章中提供了非常好的實做案例。這個座標系統是相對固定的。理解 SVG 中的 Viewport 和 ViewBox - 實做縮放（zoom）和拖曳（drag）效果本文章同步刊載於 PJCHENder 前端網頁資源站不同於以往...

Leo_chen 2019-08-20 15:19 评论0 收藏0
[技術分享] 理解 SVG 中的 Viewport 和 ViewBox－拖曳與縮放功能實做（上）

摘要：註在這篇文章中我們只考慮和為等比例的情況。最後實做出來的功能會像這樣子實做拖曳與縮放瞭解中的和在的世界中，空間的概念可以分成和兩個部分。實際感受的效果在她所撰寫文章中提供了非常好的實做案例。這個座標系統是相對固定的。理解 SVG 中的 Viewport 和 ViewBox - 實做縮放（zoom）和拖曳（drag）效果本文章同步刊載於 PJCHENder 前端網頁資源站不同於以往...

AJie 2019-08-01 16:34 评论0 收藏0
svg的坐标系统

摘要：发现目前浏览器支持的挺强大的，但是本身有很多背景知识和元素属性以及库等，如何系统地掌握这一强大工具呢视窗和视野这两个词的翻译还是比较好的你站在屋子里通过窗户来看外面的世界。的坐标和的最左边的坐标对齐最近做一个流程图绘制项目，所以研究了一下svg。发现svg目前浏览器支持的挺强大的，但是svg本身有很多背景知识和元素属性以及js库等，如何系统地掌握这一强大工具呢？ viewPort(视...

spademan 2019-08-01 15:11 评论0 收藏0