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="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>好评率{{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>

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);    });   }