当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue-better-scroll 的使用实例代码详解

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

2018年12月05日  | 移动技术网IT编程  | 我要评论

首先安装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>好评率{{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>

js

<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注册

在钩子函数 create中 用vue-resource 请求数据，并异步调用方法

this.$nexttick(()=>{
       this._initscroll();
      }

   注册方法

_initscroll(){
     this.meunscroll=new bscroll(this.$refs.menuwrapper,{});
     this.foodsscroll=new bscroll(this.$refs.foodswrapper,{});
  }

better-scroll用法

我们先来看一下 better-scroll 常见的 html 结构：

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

当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 better-scroll 的滚动原理。

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

better-scroll 对外暴露了一个 bscroll 的类，我们初始化只需要 new 一个类的实例即可。第一个参数就是我们 wrapper 的 dom 对象，第二个是一些配置参数。

better-scroll 的初始化时机很重要，因为它在初始化的时候，会计算父元素和子元素的高度和宽度，来决定是否可以纵向和横向滚动。因此，我们在初始化它的时候，必须确保父元素和子元素的内容已经正确渲染了。如果没有办法滑动，那就是初始化的时机不对。

饿了么是这样处理的：

mounted() {
  this.$nexttick(() => {
  this.scroll = new bscroll(this.$refs.wrapper, {}) }) 
  }

this.$nexttick()这个方法作用是当数据被修改后使用这个方法会回调获取更新后的dom再render出来
如果不在下面的this.$nexttick()方法里回调这个方法，数据改变后再来计算滚动轴就会出错

上拉刷新功能

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

总结

以上所述是小编给大家介绍的vue-better-scroll 的使用实例代码详解，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网