1. 程式人生 > >vue中使用better-scroll內容頁的高度計算問題

vue中使用better-scroll內容頁的高度計算問題

在vue中的內容頁中,總是會出現內容頁的滾動高度不夠問題,原因其實就是better-scroll的初始化時圖片還沒下載完。

所以計算的是當時dom元素的高度。找到原因後解決方案也就好說了。

直接上程式碼:

updated () {
        //解決better-scroll因為圖片沒有下載完導致的滾動條高度不夠,無法瀏覽全部內容的問題。
        //原因是better-scroll初始化是在dom載入後執行,此時圖片沒有下載完成,導致滾動條高度計算不準確。
        //利用圖片的complete屬性進行判斷,當所有圖片下載完成後再對scroll重新計算。
        let img = document.getElementsByClassName('content')[0].getElementsByTagName('img')
        let count = 0
        let length = img.length
        if (length) {
            let timer = setInterval(() => {
                if (count == length) {
                    // console.log('refresh')
                    this.scroll.refresh()
                    clearInterval(timer)
                } else if (img[count].complete) {
                    count ++
                }
            }, 100)
        }
        
    },

相關推薦

vue使用better-scroll內容高度計算問題

在vue中的內容頁中,總是會出現內容頁的滾動高度不夠問題,原因其實就是better-scroll的初始化時圖片還沒下載完。 所以計算的是當時dom元素的高度。找到原因後解決方案也就好說了。 直接上程式碼: updated () { //解決be

2018.11.11 晚上 vuebetter-scroll的使用以及axios注意事項

又是一年光棍節。。。剁手買了一條褲子。。。。 今天學習關於在vue裡面的better-scroll的使用:   1.首先先安裝better-scroll cnpm i better-scroll   2.然後要滑動的滑動體要定義在兩個div裡面,這樣才有效果,一定要注意

Vuebetter-scroll外掛的使用

實現原理:父容器固定高度,並設定屬性overflow: hidden,使得子元素高度超出容器後能被隱藏。better-scroll作用在父容器上。 1、npm安裝better-scroll外掛。npm

vue結合 better-scroll 下拉加載問題

無奈 its The 解決辦法 data line eth imp hidden 源碼:https://github.com/LY-u/vue_better-scroll 封裝scroll.vue組件, 在組件內加載: import BScroll from ‘bette

vue利用better-scroll實現通訊錄式列表滾動和左右聯動效果(2)

3.右邊字母列表滑動或者點選時對應的字母高亮 _calculateHeight () { this.listHeight = [] const list = this.$refs.listgroup let height = 0

vue基於better-scroll製作左右聯動滑動頁面

介面如下: vue模板 <template> <div class="goods"> <div class="menu-wrapper"> <ul> <li class="menu-item"

vue使用better-scroll導航滾動的指定位置

思路: 主要是通過better-scroll的scrollToElement()方法來實現的 import BScroll from 'better-scroll'; template: <div class="tab" ref="tab

vue使用Better-Scroll實現縱向滾動

將縱向滾動抽象為一個外掛,多次呼叫具體參看見橫向滾動中描述。首先貼出全部程式碼: <template> //better-scroll作用於子元素,所以要有一層wrapper封裝 <div ref="wrapper">

詳解vuebetter-scroll實現輪播圖和頁面滾動

(該方法只針對移動端使用效果較好,PC端不推薦,使用的版本是[email protected],其他版本會出錯) 1.安裝better-scroll 在根目錄中package.json的dependencies中新增: "better-scr

vue使用 better-scroll的引數和方法

格式:var obj = new BScroll(object,{[option1,],.,.}); 注意: 1、要確保object元素的高度比其父元素高 2、使用時,一定要確保object所在的dom渲染後,再用上面的語句,或者obj.refresh() O

VUE】在vue使用@scroll監聽滾動事件,@scroll無效問題解決!

在網上看了一下vue中監聽滾動條滾動事件,清一色的使用document.addEventListener('scroll',function(){})我是在做滾動條滑到底部時,自動載入更多的時候有這個需求。我認為使用document.addEventListener會破壞vu

Vue(用better-scroll實現滑動效果)

border current pen dex gree v-for import [] ron 一、前言 1、效果演示 2

better-scrollvue的坑

合作 swipe 插件 標簽 遇見 issue 特殊 要去 似的 在我們日常的移動端項目開發中,處理滾動列表是再常見不過的需求了,以滴滴為例,可以是這樣豎向滾動的列表,如圖所示: 也可以是橫向滾動的導航欄,如圖所示: 可以打開“微信 —> 錢包—>滴

vue使用better-scroll做橫向滾動註意事項

註意 pla info style 技術分享 col content http strong 需要註意的地方有兩點: 1、一定要去掉scoped 錯誤實例: 正確實例: 2、要在scroll上一級dom的下面加一個樣式 .scroll-content disp

better-scrollvue的使用

一、介紹   關於better-scroll的原文詳細介紹請參考,這裡只做總結     黃老師的文章《當 better-scroll 遇見 Vue》的詳細介紹     better-scroll的api:點選   better-scroll的滾動原理 <div class="wrappe

Vue專案使用better-scroll實現一個輪播圖

前言 better-scroll是一個非常非常強大的第三方庫 在移動端利用這個庫 不僅可以實現一個非常類似原生ScrollView的效果 也可以實現一個輪播圖的效果 這裡就先記錄一下自己實現這個效果的一些過程吧 思路 1.首先要確定自己的HTML結構 基本結構就是一個wrapper包含一個content

better-scrollvue 的使用

下載 npm install –save-dev better-scroll 使用方法 html <div class='big_out' ref='bigout'> <ul> <li v-for='(n, index) in 1

vue使用better-scroll實現頁面滑動

1、安裝better-scroll npm install--save better-scroll 2、在組價中引用 import BScroll from 'better-scroll' 3、建立滾動 new BScroll(Dom元素) 這裡的Dom元素可以傳

js倒計時60秒。vue 更新陣列。vue js。html 返回上一vue h3 顯示不出來。vue 標籤內容顯示不出來。

js倒計時60秒==html 返回上一頁onclick=”javascript:history.back(-1);javascript :history.go(-1)==vue h3 顯示不出來vue 標籤內容顯示不出來檢視css樣式,尤其是全域性的, 應該設定了字型大小0,

Vue使用better-scroll所遇到的若干問題

(better-scroll可適用於滾動列表、輪播圖、索引列表、開屏引導、上拉載入、下拉重新整理等應用場景) 最近在做一個基於Vue的webapp,用到了better-scroll這個外掛,遇到一些