vue使用betterScroll，讓網頁兼容PC端與移動端

最近在寫的一個網頁由於是響應式，想弄一下上啦加載，下拉刷新這些，但是傳統網頁布局在手機上滑動時候有些卡，所以就使用betterScroll，這個betterScroll之前再寫一個網頁的時候也有用過，當時純粹是PC端網頁，然后也覺得配置項有些難弄，很難適配PC端的滾動事件，因為用鼠標滑動時，原生瀏覽器的滾動條並不會觸發，要觸發的話，可能得實時refresh一下，感覺很麻煩，認為移動端的這玩意弄到PC端就有點不兼容，所以就放棄了，最近在做畢業設計，沒辦法，想寫一個響應式的，在PC與手機上都需要滾動，所以用了這個玩意。

首先原理圖：

 

 無非就是要在最外面弄一個div，設置一下具體高度，然后這個高度就是滾動的區域，往里面塞東西時，一旦子元素超出父元素定義好的具體高度時，就可以滾動了，原理很簡單，懂的都懂。

正文：

一、由編寫首頁時遇到的問題引發的思考：

因為我寫的是響應式的，所以要實時給wrapper設置一個具體的值，而且這個具體的值必須是依據瀏覽器一直在改變的，首先我想到是使用style，動態綁定元素，實時根據不同設備高度給它一個值，然而一開始語法寫錯了，害我另辟蹊徑，但是這個最開始的想法是對的：

下面這個例子就是讓這個窗口的可視區域為滾動區域，innerHeight就是除了瀏覽器高度以外的高度，

<div class="myRapper1" :style="{ height : deviceHeight + 'px' }" ref="myRapper">
      <div class="content">
        <slot name="myContent"></slot>
      </div>
    </div>


data() {
        return {
          scroll: null,
          deviceHeight: 0
        }


在mouted時：

this.$refs.myRapper.height = innerHeight ;

這樣在滾到底部時就沒問題了：

 

 下面是仿真器下效果：

 如果直接給外面wrapper具體高度，而不響應改變，下面就是這個效果：

 

 好家伙一片空白，但是至少還可以看見全部內容，換個設備試一試：

 還有一部分直接拉不出來。

下面是我想到的第二種，寫媒體查詢，根據不同設備，寫不同wrapper高度：

幾乎把主流的通信設備尺寸都寫下來了，但是根據不同設備，不同瀏覽器問題，還要自己減去瀏覽器的高度，而且不同瀏覽器的菜單高度又不一樣，這個配置還沒寫一半，腦袋就受不了了

 /* @media screen and (min-device-height:320px) {
      .myRapper {
        height: 320px;
      }
    }

    @media screen and (min-device-height:533px) {
      .myRapper {
        height: 533px;
      }
    }
    @media screen and (min-device-height:568px){
    .myRapper{
      height:568px ;
    }
  }
    @media screen and (min-device-height:640px) {
      .myRapper {
        height: 640px;
      }
    }
 
    @media screen and (min-device-height:667px) {
      .myRapper {
        height: 667px;
      }
    }
    @media screen and (min-device-height:732px) {
      .myRapper {
        height: 732px;
      }
    }
    @media screen and (min-device-height:736px) {
      .myRapper {
        height: 736px;
      }
    }
    @media screen and (min-device-height:800px) {
      .myRapper {
        height: 800px;
      }
    }
    @media screen and (min-device-height:812px) {
      .myRapper {
        height: 812px;
      }
    }
    @media screen and (device-width:375px) {
      .myRapper {
        height: 812px;
      }
    }
    @media screen and (min-device-height:823px){
    .myRapper{
      height:823px ;
    }
  }
    @media screen and (min-device-height:854px) {
      .myRapper {
        height: 854px;
      }
    }

    @media screen and (min-device-height:900px) {
      .myRapper {
        height: 900px;
      }
    }

    @media screen and (min-device-height:950px) {
      .myRapper {
        height: 950px;
      }
    }

    @media screen and (min-device-height:960px) {
      .myRapper {
        height: 960px;
      }
    }
    @media screen and (min-device-height:1024px) {
      .myRapper {
        height: 1024px;
      }
    }
   
    @media screen and (min-device-height:1280px) {
      .myRapper {
        height: 1280px;
      }
    }

    @media screen and (min-device-height:1366px) {
      .myRapper {
        height: 625px;
      }
    }

    @media screen and (min-device-height:1366px)and(device-width:1024px) {
      .myRapper {
        height: 1366px;
      }
    }
    @media screen and (height:657px) {
      .myRapper {
        height: 657px;
      }
    }
    */

------------------------------------上面為第一次更，下次補上響應式百分比形式控制wrapper高度，因為首頁的我只是想讓它全部滾動，直接賦給wrapper可視區域高度了，突然想到，其實不用補上百分比形式了，直接innerHeight拿到可視區域高度后乘以一個小數，再綁定到wrapper的高度值上就好了。

 

最后附上betterScroll官網的地址，可以方便各位查詢：https://better-scroll.github.io/docs/zh-CN/，這個是中文文檔地址，但是你如果直接瀏覽器訪問會出現以下情況：

 

 也不知道為什么……

但是你可以登錄碼雲搜索betterScroll，而不是GitHub，因為GitHub在中國網速訪問很慢：

 然后點擊上面的第二個，下滑找到：

 

 

 點擊這兩個都可以，版本1.x的api比較多，2.x是往1上面添加或者修改的對東西，具體怎么使用點擊進去就好了：

1.X官網

 

 

2.X官網

 附上封裝的betterScroll：

<template>
    <div class="myRapper1" :style="{ height : deviceHeight + 'px' }" ref="myRapper">
      <div class="content">
        <slot name="myContent"></slot>
      </div>
    </div>
  </template>
  <script>
    import BScroll from 'better-scroll'
    export default {
      name: 'myScroll',
　　　　//滾動區域暫據可視窗口高度的倍數
      props: {
        Multiples:{
          type: Number,
          default: 1
        },
　　　　//滾動是否開啟監聽，0表示不監聽，1間歇性監聽，2表示按下拇指時實時監聽，3，不管任何時刻都監聽，監聽開啟后，可以發出scroll事件，實時監控scroll實例對象的滾動狀態
        probeType: {
          type: Number,
          default: 1
        },
        // 上啦加載是否開啟
        pullUpLoad: {
          type: Boolean,
          default: false
        },
        //下拉刷新
        pullDownRefresh: {
          type: Boolean,
          default: false
        }
      },
      data() {
        return {
          scroll: null,
          deviceHeight: 0
        }
      },
      mounted() {
        console.log("設備高"+this.deviceHeight)
        this.deviceHeight = innerHeight*this.Multiples;//賦給滾動區域的wrapper高度值，由渲染時傳入，以便於檢測不同設備不同高度
     
        // 創建scroll實例
        this.scroll = new BScroll(this.$refs.myRapper, {
          // 運用正則表達式阻止betterScroll會一些的一些元素標簽，具體使用看官網
          preventDefaultException: {
            tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|AUDIO)$/,
            className: /(^|\S)(swiper-container|swiper-container1)(\S|$)/
          },
          scrollbar: { //開啟滾動條
            fade: true,
            interactive: false // 1.8.0 新增
          },
          //配置鼠標滾動，頁面控制
          mouseWheel: {
            speed: 20,
            invert: false,
            easeTime: 300
          },
          disableMouse: false, //啟用鼠標拖動
          disableTouch: false, //啟用手指觸摸
          //設置html傳統樣式可點擊
          click: true,
          //根據傳值絕對是否監聽滾動位置，0表示不監聽，1表示間斷性監聽，2表示拇指按下時時刻監聽（除慣性滾動），3表示每時每刻都監聽
          probeType: this.probeType,
          //根據傳值絕對是否上拉加載更多
          pullUpLoad: this.pullUpLoad,
          pullDownRefresh: this.pullDownRefresh
        })

        if (this.probeType === 2 || this.probeType === 3) {
          // this.scroll.on是better內部的方法用來監聽內部鈎子（函數），
          //此處監聽的是scroll，scroll函數滾動時觸發，根據probeType類型不同，有不同觸發效果
          this.scroll.on('scroll', (position) => {
            this.$emit('scroll', position)
          })
        };
        //刷新上拉加載更多的高度
        // this.scroll.refresh();
        //監聽上拉加載更多,pullingUp屬性
        //this.scroll.on是用來監聽better scroll里面的鈎子函數的執行的，如果監聽內部函數執行，則執行回調函數
        //  如果有下拉加載，則提交pullingUp
        if (this.pullUpLoad) {
          this.scroll.on('pullingUp', () => {
            // console.log('監聽滾到底部！');
            // 通過this.$emit()提交到外面
            this.$emit('pullingUp');
          })
        }
        // 如果有下拉加載，則提交pullingUp
        if (this.pullDownRefresh) {
          this.scroll.on('pullingDown', () => {
            // console.log('監聽滾到底部！');
            // 通過this.$emit()提交到外面
            // this.scroll.refresh();
            this.$emit('pullingDown');
          })

        }
      },
      methods: {
        scrollTo(x, y, time = 500) {
          this.scroll.scrollTo(x, y, time)
        },
        // 滾動到底部時上啦時，父組件調用此函數通知子組件完成上啦操作，才能繼續使用pullingUp監聽滾到頂部
        finishPullUp() {
          this.scroll.finishPullUp()
        },
        // 滾動到頂部下拉時，父組件調用此函數通知子組件已經完成下拉操作，才能繼續使用pullingDown監聽滾到底部
        finishPullDown() {
          this.scroll.finishPullDown()
        },
        refresh() {
          this.scroll.refresh();
          // console.log('您調用了better-scroll的refresh')
        }
      },
    }
  </script>
  <style>
    .myRapper1{

    }
  </style>

 父組件使用子組件封裝好的betterScroll:

//pullUpLoad等於true，就是開啟監聽上啦加載事件，其他的以此類推，看不懂的可以看官網屬性值配置項那些 
<Scroll ref="brief_scroll" @scroll="listen_briefScroll" :probeType="2" 
    :pullUpLoad="true" :pullDownRefresh="true" :Multiples="1"
    @pullingUp="loadMore_down" @pullingDown="fresh_up">
      <div slot="myContent"> 

     插入子元素，比父元素高時，就可以滾動
     </div>
</Scroll>