vux-ui的ViewBox的坑

luodongseu 發(fā)布于2019-08-02 13:58 / 3469人閱讀

摘要：鏈接該組件為高布局，可以解決部分鍵盤輸入的問題，但是同時(shí)會(huì)在中出現(xiàn)向下滾動(dòng)時(shí)無法自動(dòng)隱藏工具欄和底部欄的問題。在里元素定位為，效果等同于。

鏈接 https://doc.vux.li/zh-CN/comp...

該組件為100%高布局，可以解決部分鍵盤輸入的問題，但是同時(shí)會(huì)在safari中出現(xiàn)向下滾動(dòng)時(shí)無法自動(dòng)隱藏url工具欄和底部欄的問題。

在viewBox里元素定位為absolute，效果等同于fixed。

使用時(shí)需要設(shè)置 html, body 高為100%:

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

view-box所有父div也需要為100%高度：

如果你想保存滾動(dòng)距離，推薦使用vuex實(shí)現(xiàn)，在特定path對(duì)scrollBody監(jiān)聽scroll事件，并獲取滾動(dòng)距離保存到vuex的state里。示例可以參考vux源碼的App.vue

現(xiàn)在就是使用 vue 的keep-alive來完成記錄列表滾動(dòng)條問題

watch: {

  $route (to, from) {
    let scrTop = this.$refs.viewBox.getScrollTop()
    // 從列表到具體文章時(shí)保存之前的滾動(dòng)距離
    if (to.name === "detail") {
      this.$refs.viewBox.scrollTo(0)
      console.warn("從列表到具體文章時(shí)保存之前的滾動(dòng)距離 this.$refs.viewBox.getScrollTop: " + scrTop)
      this.$store.commit("SetScrollTop", scrTop)
    }
    // 從文章退回列表跳轉(zhuǎn)到之前的位置
    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 滾動(dòng)位置一直不對(duì) 今天分享到這里

云服務(wù)器 GPU云服務(wù)器語言的坑爹設(shè)計(jì) 阿里云服務(wù)器的坑 ViewBox 云服務(wù)器踩過的坑

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/53478.html

相關(guān)文章

vux-ui的ViewBox的坑

摘要：鏈接該組件為高布局，可以解決部分鍵盤輸入的問題，但是同時(shí)會(huì)在中出現(xiàn)向下滾動(dòng)時(shí)無法自動(dòng)隱藏工具欄和底部欄的問題。在里元素定位為，效果等同于。鏈接 https://doc.vux.li/zh-CN/comp... 該組件為100%高布局，可以解決部分鍵盤輸入的問題，但是同時(shí)會(huì)在safari中出現(xiàn)向下滾動(dòng)時(shí)無法自動(dòng)隱藏url工具欄和底部欄的問題。在viewBox里元素定位為absolut...

用戶83 2019-08-30 15:55 評(píng)論0 收藏0
vux-ui的ViewBox的坑

摘要：鏈接該組件為高布局，可以解決部分鍵盤輸入的問題，但是同時(shí)會(huì)在中出現(xiàn)向下滾動(dòng)時(shí)無法自動(dòng)隱藏工具欄和底部欄的問題。在里元素定位為，效果等同于。鏈接 https://doc.vux.li/zh-CN/comp... 該組件為100%高布局，可以解決部分鍵盤輸入的問題，但是同時(shí)會(huì)在safari中出現(xiàn)向下滾動(dòng)時(shí)無法自動(dòng)隱藏url工具欄和底部欄的問題。在viewBox里元素定位為absolut...

voyagelab 2019-08-23 14:16 評(píng)論0 收藏0
[技術(shù)分享] 理解 SVG 中的 Viewport 和 ViewBox－拖曳與縮放功能實(shí)做（上）

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

Leo_chen 2019-08-20 15:19 評(píng)論0 收藏0
[技術(shù)分享] 理解 SVG 中的 Viewport 和 ViewBox－拖曳與縮放功能實(shí)做（上）

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

AJie 2019-08-01 16:34 評(píng)論0 收藏0
svg的坐標(biāo)系統(tǒng)

摘要：發(fā)現(xiàn)目前瀏覽器支持的挺強(qiáng)大的，但是本身有很多背景知識(shí)和元素屬性以及庫等，如何系統(tǒng)地掌握這一強(qiáng)大工具呢視窗和視野這兩個(gè)詞的翻譯還是比較好的你站在屋子里通過窗戶來看外面的世界。的坐標(biāo)和的最左邊的坐標(biāo)對(duì)齊最近做一個(gè)流程圖繪制項(xiàng)目，所以研究了一下svg。發(fā)現(xiàn)svg目前瀏覽器支持的挺強(qiáng)大的，但是svg本身有很多背景知識(shí)和元素屬性以及js庫等，如何系統(tǒng)地掌握這一強(qiáng)大工具呢？ viewPort(視...

spademan 2019-08-01 15:11 評(píng)論0 收藏0