标签：就是 pre component pac get target 方式 this position
1.安装（官方文档上有，不多言了）
better-scroll 托管在 Npm 上，执行如下命令安装：
npm install better-scroll --save
接下来就可以在代码中引入了，webpack 等构建工具都支持从 node_modules 里引入代码：
import BScroll from ‘better-scroll‘
如果是 ES5 的语法，如下：
var BScroll = require(‘better-scroll‘)
better-scroll 也支持直接用 script 加载的方式，加载后会在 window 上挂载一个 BScroll 的对象。
你可以直接用：https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js 这个地址。也可以把 dist 目录下的文件拷贝出去发布到自己的 cdn 服务器。
2.Scroll的封装（每个页面都导入使用太过于麻烦，耦合太高，因此我做了封装）
1 <template> 2 <div class="wrapper" ref="wrapper"> 3 <div class="content"> 4 <slot></slot> 5 </div> 6 </div> 7 </template> 8 9 <script> 10 import BScroll from ‘better-scroll‘ 11 12 export default { 13 name: "Scroll", 14 props: { 15 probeType: { 16 type: Number, 17 default: 0 18 }, 19 pullUpLoad: { 20 type: Boolean, 21 default: false 22 } 23 }, 24 data() { 25 return { 26 scroll: null, 27 message: ‘哈哈哈‘ 28 } 29 }, 30 mounted() { 31 // 1.创建BScroll对象 32 this.scroll = new BScroll(this.$refs.wrapper, { 33 click: true, 34 probeType: this.probeType, 35 pullUpLoad: this.pullUpLoad 36 }) 37 38 // 2.监听滚动的位置 39 this.scroll.on(‘scroll‘, (position) => { 40 // console.log(position); 41 this.$emit(‘scroll‘, position) 42 }) 43 44 // 3.监听上拉事件 45 this.scroll.on(‘pullingUp‘, () => { 46 this.$emit(‘pullingUp‘) 47 }) 48 }, 49 methods: { 50 scrollTo(x, y, time = 300) { 51 this.scroll.scrollTo(x, y, time) 52 }, 53 finishPullUp() { 54 this.scroll.finishPullUp() 55 } 56 } 57 } 58 </script> 59 60 <style scoped> 61 62 </style>
3.使用 (将想要滚动的内容放在 <Scroll-box></Scroll-box>中即可)
<template>
<scroll-box class="content">
<div></div>
</scroll-box>
</div>
</template>
<script>
import Scroll from ‘../../subcomponents/Scroll‘
export default {
data() {
return {
}
},
components: {
‘scroll-box‘: Scroll
},
created() {
},
methods: {
}
</script>
<style lang="scss" scoped>
.content {
height: 350px;
}
</style>
4.其他
其他问题，就是如何调整最合适的滚动区域，以及监听滚动的位置了，在官方文档上查看即可
标签：就是 pre component pac get target 方式 this position
原文地址：https://www.cnblogs.com/apex-wzw/p/11741205.html
