better-scroll不生效緣由

　　在vue項目中運用better-scroll插件進行上拉加載的功能時，頁面拉不動。

　　html結構：

<div class="wrapper" ref="wrapper">
        <ul class="now-film content">
            <li class="now-film-item" v-for="(item, index) in now" @click="handleClick()">
                <div class="now-film-item-img">
                    <img :src="item.poster.origin" alt="">
                </div>
                <div class="now-film-item-tips">
                    <div class="now-film-item-tips-top">
                        <span>{{item.name}}</span>
                        <span>{{item.grade}}</span>
                    </div>
                    <p class="now-film-item-tips-center">{{item.intro}}</p>
                    <div class="now-film-item-tips-bottom">
                        <span>{{item.cinemaCount}}家影院上映</span>&nbsp;&nbsp;
                        <span>{{item.watchCount}}人購票</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>

　　html結構沒問題

先看下瀏覽器滾動條生效的原理：

　　瀏覽器的滾動原理： 瀏覽器的滾動條你們都會遇到，當頁面內容的高度超過視口高度的時候，會出現縱向滾動條；當頁面內容的寬度超過視口寬度的時候，會出現橫向滾動條。也就是當咱們的視口展現不下內容的時候，會經過滾動條的方式讓用戶滾動屏幕看到剩餘的內容

 

失效緣由：

　　其實better-scroll文檔已經說得很清楚了：當 content 的高度不超過父容器的高度，是不能滾動的，而它一旦超過了父容器（wrapper）的高度，咱們就能夠滾動內容區了

　　當把BScroll打印出來發現hasVerticalScroll屬性爲false，則必定是wrapper和content計算高度時出錯了。此時，對比下scrollerHeight和wrapperHeight，多半是前者小於等於後者。而後，手動修改hasVerticalScroll爲true，會發現能夠拖拽，但不是滾動。這是由於scrollerHeight計算錯誤。

　　高度計算出錯多半是由於dom沒更新完就初始化BS。(BS必須在dom完成以後被初始化)，但我這裏的問題出在wrapper的高度等於content的高度，因此就不能滾動了

 

　　

 

　　

　　#app的height爲100%

　　.header-wrapper高度固定

　　我當時.wrapper的高度也是100%，因爲100%是相對於父元素的高度，但此時父元素.movie並無設置高度，因此父元素的高度等於子元素撐開的高度，因爲.movie-tab也是固定高度，因此.wrapper的高度等於父元素的高度減去.movie-tab的高度，也就等於ul的高度，因此better-scroll不生效。

 

解決方案：

　　將.wrapper的父元素.movie的高度也設爲100%，此時.movie的高度就等於#app的高度減去.header-wrapper的高度（頁面的剩餘高度），那麼.wrapper的高度也就等於頁面上可視的wrapper高度，高度就固定了

 

反思：

　　一、html和css基礎不夠紮實，百分比理解不夠透徹

　　二、解決該問題花了很長時間，其實發現仍是本身百度或谷歌解決最快

 

延伸：

　　一、屏蔽滾動條的方法：出現滾動條是由於內容去大於包裹區，因此給包裹區加個overflow:hidden就好了

　　二、better-scroll插件的使用

　　　　（1）npm install better-scroll --save

　　　　（2）import BScroll from 'better-scroll'

　　　　（3）

mounted() {
        //第一個參數是滾動元素的外盒子 第二個參數是配置項
        this.scroll = new BScroll(this.$refs.wrapper,{
            click:true,
            pullUpLoad:true
        })

        //當用戶上拉時觸發的事件
        this.scroll.on("pullingUp",()=>{
           this.handleNow_getNowMovie(++this.pageNum)
        })
    },
    updated () {
        //從新計算高度
        this.scroll.refresh();
        //當數據加載完畢之後通知better-scroll
        this.scroll.finishPullUp();
    }

（4）

const actions = {
    handleNow({commit}, params) {
        if (params < 7) {
            axios({
                method: 'get',
                url: '/v4/api/film/now-playing?page=' + params + '&count=7',
            }).then((res) => {
                commit('handleNow', res.data.data.films);
                console.log(res);
            });
        }
        
    }
}

（5）

const mutations = {
    handleNow(state, params) {
　　　　//防止後面的數據覆蓋前面的數據
        state.now = [...state.now, ...params];
        console.log(state.now);
    }
}