vue-better-scroll 的使用实例代码详解

<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=\" \">{{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.de ion}}</p>
        <div class=\"extra\">
         <span class=\"food-number\">月售{{food.sellCount}}份</span>
         <span>好评率{{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>

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

  props:{
    seller:{
      type: 
    }
  },
 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,{});
  }

 }
}
</ >

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

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

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

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

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

<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() {
   // 设置wrapper的高度
   this.$refs.wrapper.style.height = document.getElementById(\"app\").offsetHeight - document.getElementById(\"scroll\").offsetTop + \"px\";
   // better-scroll 的content高度不大于wrapper高度就不能滚动,这里的问题是,当一页数据的高度不够srapper的高度的时候,即使存在n页也不能下拉
   // 需要设置content的min-height大于wrapper高度
   this.$refs.content.style.minHeight = this.$refs.wrapper.offsetHeight + 1 + \"px\";
   this._initScroll();
   this.getIncomeDetail(this.nextPage);
   // 设置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的时候加载
     },
     mouseWheel: {  // pc端同样能滑动
      speed: 20,
      invert: false
     },
     useTransition:false, // 防止iphone微信滑动卡顿
    });
    // 上拉加载数据
    this.orderScroll.on(\'pullingUp\',()=>{
     this.scrollFinish = false;
     // 防止一次上拉触发两次事件,不要在ajax的请求数据完成事件中调用下面的finish方法,否则有可能一次上拉触发两次上拉事件
     this.orderScroll.finishPullUp();
     // 加载数据
     this.getIncomeDetail(this.nextPage);
    });
   }