vue-better-scroll 的使用實(shí)例代碼詳解

更新時(shí)間：2018年12月03日 15:15:07 作者：望天一方

這篇文章主要介紹了vue-better-scroll 的使用實(shí)例代碼詳解，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

首先安裝better-scroll

npm i better-scroll -S

goods頁面模板

<template>
 <div class="goods">
  <div class="menu-wrapper" ref="menuWrapper">
   <ul>
    <li v-for="item in goods" class="menu-item">
     <span class="text border-1px">
      <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}

     </span>

    </li>
   </ul>
  </div>
  <div class="foods-wrapper" ref="foodsWrapper">
   <ul>
    <li v-for="item in goods" >
     <h1 class="title">{{item.name}}</h1>
     <ul>
      <li v-for="food in item.foods" class="food-item border-1px">
       <div class="icon">
        <img :src="food.icon" alt="" width="57" height="57">
       </div>
       <div class="content">
        <h2 class="name">{{food.name}}</h2>
        <p class="desc">{{food.description}}</p>
        <div class="extra">
         <span class="food-number">月售{{food.sellCount}}份</span>
         <span>好評(píng)率{{food.rating}}%</span>
        </div>
        <div class="price">
         <span class="nowPrice">￥{{food.price}}</span>
         <span class="oldPrice">￥{{food.oldPrice}}</span>
        </div>
       </div>

      </li>
     </ul>
    </li>
   </ul>

  </div>
 </div>
</template>

<script type="text/ecmascript-6">
 /* eslint-disable*/
 
 import BScroll from 'better-scroll'
export default{

  props:{
    seller:{
      type:Object
    }
  },
 data(){
    return{
      goods:[]
    }
 },
 created(){
    this.classMap=['decrease', 'discount', 'special', 'invoice', 'guarantee']
    this.$http.get('/api/goods').then((res)=>{
      this.goods=res.data.data;
      this.$nextTick(()=>{
       this._initScroll();
      })
     console.log(this.$refs.menuWrapper)


    })

 },
 methods:{
   _initScroll(){
     this.meunScroll=new BScroll(this.$refs.menuWrapper,{});
     this.foodsScroll=new BScroll(this.$refs.foodsWrapper,{});
  }

 }
}
</script>

先用ref 綁定事件，在vue中用$ .refs注冊(cè)

在鉤子函數(shù) create中用vue-resource 請(qǐng)求數(shù)據(jù)，并異步調(diào)用方法

this.$nextTick(()=>{
       this._initScroll();
      }

注冊(cè)方法

_initScroll(){
     this.meunScroll=new BScroll(this.$refs.menuWrapper,{});
     this.foodsScroll=new BScroll(this.$refs.foodsWrapper,{});
  }

better-scroll用法

我們先來看一下 better-scroll 常見的 html 結(jié)構(gòu)：

<div class="wrapper">
 <ul class="content"> 
   <li></li>
   <li></li> 
   <li></li>
   <li></li> 
 </ul>
</div>

當(dāng) content 的高度不超過父容器的高度，是不能滾動(dòng)的，而它一旦超過了父容器的高度，我們就可以滾動(dòng)內(nèi)容區(qū)了，這就是 better-scroll 的滾動(dòng)原理。

 import BScroll from 'better-scroll'
 let wrapper = document.querySelector('.wrapper')
 let scroll = new BScroll(wrapper, {})

better-scroll 對(duì)外暴露了一個(gè) BScroll 的類，我們初始化只需要 new 一個(gè)類的實(shí)例即可。第一個(gè)參數(shù)就是我們 wrapper 的 DOM 對(duì)象，第二個(gè)是一些配置參數(shù)。

better-scroll 的初始化時(shí)機(jī)很重要，因?yàn)樗诔跏蓟臅r(shí)候，會(huì)計(jì)算父元素和子元素的高度和寬度，來決定是否可以縱向和橫向滾動(dòng)。因此，我們?cè)诔跏蓟臅r(shí)候，必須確保父元素和子元素的內(nèi)容已經(jīng)正確渲染了。如果沒有辦法滑動(dòng)，那就是初始化的時(shí)機(jī)不對(duì)。

餓了么是這樣處理的：

mounted() {
  this.$nextTick(() => {
  this.scroll = new Bscroll(this.$refs.wrapper, {}) }) 
  }

this.$nextTick()這個(gè)方法作用是當(dāng)數(shù)據(jù)被修改后使用這個(gè)方法會(huì)回調(diào)獲取更新后的dom再render出來
如果不在下面的this.$nextTick()方法里回調(diào)這個(gè)方法，數(shù)據(jù)改變后再來計(jì)算滾動(dòng)軸就會(huì)出錯(cuò)

上拉刷新功能

<div class="wrapper" ref="wrapper">
    <ul class="content" ref="content">
     <li v-for="(item,key) in detail" :key="key" v-if="detail.length > 0">
      <Row type="flex" justify="start" align="middle">
       <Col :span="8" class="detail-item">
       <span :class="{'color-red':item.is_delay === 1}">{{item.order_sn}}</span>
       </Col>
       <Col :span="8" class="detail-item">
       <span>{{item.date}}</span>
       </Col>
       <Col :span="8" class="detail-item">
       <span>￥ {{item.partner_profit | number2}}</span>
       </Col>
      </Row>
     </li>
     <li v-if="!scrollFinish">
      <Row type="flex" justify="center" align="middle">
       <Col :span="6" v-if="loadingText">
       <p>{{loadingText}}</p>
       </Col>
       <Col :span="2" v-else>
        <Spin size="large"></Spin>
       </Col>
      </Row>
     </li>
    </ul>
   </div>

   mounted() {
   // 設(shè)置wrapper的高度
   this.$refs.wrapper.style.height = document.getElementById("app").offsetHeight - document.getElementById("scroll").offsetTop + "px";
   // better-scroll 的content高度不大于wrapper高度就不能滾動(dòng),這里的問題是,當(dāng)一頁數(shù)據(jù)的高度不夠srapper的高度的時(shí)候,即使存在n頁也不能下拉
   // 需要設(shè)置content的min-height大于wrapper高度
   this.$refs.content.style.minHeight = this.$refs.wrapper.offsetHeight + 1 + "px";
   this._initScroll();
   this.getIncomeDetail(this.nextPage);
   // 設(shè)置scroll的高度
   // this.scrollHeight = document.getElementById("app").offsetHeight - document.getElementById("scroll").offsetTop ;
  },

  methods:{
  _initScroll() {
    this.orderScroll = new BScroll(this.$refs.wrapper, {
     probeType: 3,  
     click:true,
     pullUpLoad: {  // 配置上啦加載
      threshold: -80  //上拉80px的時(shí)候加載
     },
     mouseWheel: {  // pc端同樣能滑動(dòng)
      speed: 20,
      invert: false
     },
     useTransition:false, // 防止iphone微信滑動(dòng)卡頓
    });
    // 上拉加載數(shù)據(jù)
    this.orderScroll.on('pullingUp',()=>{
     this.scrollFinish = false;
     // 防止一次上拉觸發(fā)兩次事件,不要在ajax的請(qǐng)求數(shù)據(jù)完成事件中調(diào)用下面的finish方法,否則有可能一次上拉觸發(fā)兩次上拉事件
     this.orderScroll.finishPullUp();
     // 加載數(shù)據(jù)
     this.getIncomeDetail(this.nextPage);
    });
   }

總結(jié)

以上所述是小編給大家介紹的vue-better-scroll 的使用實(shí)例代碼詳解，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: