很多人在使用vue-cli开发项目的时候,在涉及到上拉下拉加载事件的时候,很多人会使用better-scroll,出于好奇,写了个小demo来测试了一下。
安装:npm install --save better-scroll
代码如下:
<template> <div class="wrapper" ref="wrapper"> <ul class="content"> <li v-for="item in 40">{{item}}</li> </ul> </div> </template> <script> import BScroll from 'better-scroll' export default { name: 'hello', data () { return { } }, mounted () { let dom = this.$refs.wrapper; this.$nextTick(() => { this.scroll = new BScroll(dom, { scrollY:true, }) this.scroll.on('scrollEnd',(pos) => { console.log(pos) }) }) } } </script> <style> *{ margin: 0; padding: 0; } .wrapper{ width: 100%; height: 667px; } </style>
这里要特别注意的是wrapper要设置高度才行,否则不会生效,第一次使用的时候,在这里吃亏了。