better-scroll 1.13
简单入门示例：快速使用：
<template> <div class="wrapper"> <div class="content"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> </template> <script> import BScroll from 'better-scroll' export default { name: 'XScroll', // 不能在生命周期created时获取dom ，这时还没有加载完html mounted () { /* eslint-disable no-new */ new BScroll(document.querySelector('.wrapper')) // 获取dom方式一 // new BScroll(document.querySelector('.wrapper')) // 获取dom方式二 // new BScroll(document.querySelector(this.$refs.foo)) } } </script> <style scoped> .wrapper{ height: 150px; border: 1px solid #42b983; overflow: hidden; } </style>
常用方法包括上拉激活，和滚动事件，
<template> <div class="wrapper"> <div class="content"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> </template> <script> import BScroll from 'better-scroll' export default { name: 'XScroll', // 不能在生命周期created时获取dom ，这时还没有加载完html mounted () { /* eslint-disable no-new */ const bscroll = new BScroll(document.querySelector('.wrapper'), { probeType: 3, pullUpLoad: true }) bscroll.on('scroll', (position) => { console.log(position) }) // 获取dom方式一 // new BScroll(document.querySelector('.wrapper')) // 获取dom方式二 // new BScroll(document.querySelector(this.$refs.foo)) // pullingUp 上拉到头激活 bscroll.on('pullingUp', () => { setTimeout(() => { // 拉到底了通知又名上拉加载只能加载一次，finishllup函数可以在次重来 bscroll.finishPullUp() alert('又可以加了') }, 2000) }) } } </script> <style scoped> .wrapper { height: 150px; border: 1px solid #42b983; overflow: hidden; } </style>
插件封组，封装以后，那些组件需要引用的话，外层套一个bcroll 就可以使用，比较方便 ，主要原因是如果更换bcroll 版本不需要每个文件都换
<template> <div class="wrapper" ref="wrapper"> <div class="content"> <slot></slot> </div> </div> </template> <script> import BScroll from 'better-scroll' export default { name: 'Scroll', data () { return { Scroll: '' } }, mounted () { // 以下方式不太明智，建议用ref方式，同名CLASS 会出问题 // this.scroll = new BScroll(document.querySelector('.wrapper')) this.Scroll = new BScroll(this.$refs.wrapper) } } </script> <style scoped> </style>
使用示例：里面的内空不能用浮动布局，一旦脱离文档流，将不能参与计算,想让一个div区显示在正中，方法有二，第一个方法是使div定位top button 第二个方法是计算视口高度，先算上上面元素多少
然后百分比显示在中间，以下示例计算视口高度算法：
<template>
<div>
<div class="home">
<div class=" text hiet">众油宝商城菜单</div>
<b-scroll class="wrapper">
<div class="content">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</b-scroll>
<div class="text bter">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
</div>
</div>
</template>
<script>
import bScroll from '../components/common/scroll/bScroll'
export default {
name: 'bIndex',
components: {
bScroll
}
}
</script>
<style scoped>
.home{
border: 2px solid #0074D9;
//通过height 计算视口高度
height: 100vh;
}
.text{
height:45px ;
line-height: 45px;
background: #7f7f7f;
}
.wrapper {
width: 450px;
height: calc(100% - 98px);
//滚动位置根据视口高度计算
border: #C21F39 1px solid;
overflow: hidden;
}
ul {
padding: 0;
padding-left: 5px;
width: 440px;
height: auto;
margin: 0 auto;
border: 2px solid #C21F39;
overflow: hidden;
}
li {
list-style-type: none;
float: left;
margin: 2px;
width: 210px;
background: #999999;
height: 350px;
}
</style>
