------------------------------------------------------------------------------------------------------- <div id="div1"><h3> <font color=red > </font><h3></div> 安装: npm install better-scroll 1、使用better-scroll的基本条件 必须包含两个大的div，外层和内层div 外层div设置可视的大小(宽或者高)-有限制宽或高 内层div，包裹整个可以滚动的部分 内层div高度一定大于外层div的宽或高，才能滚动 ### 原理 >绿色部分为 wrapper，也就是父容器，它会有固定的高度。 黄色部分为 content，它是父容器的第一个子元素，它的高度会随着内容的大小而撑高. 那么，当 content 的高度不超过父容器的高度，是不能滚动的， 而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 better-scroll 的滚动原理。 ### better-scroll 的初始化 >因为它在初始化的时候，会计算父元素和子元素的高度和宽度，来决定是否可以纵向和横向滚动。 因此，我们在初始化它的时候，必须确保父元素和子元素的内容已经正确渲染了。 如果子元素或者父元素 DOM 结构发生改变的时候，必须重新调用 scroll.refresh() 方法重新计算来确保滚动效果的正常。 ### 初始化做法 >通过了 this.$refs.wrapper访问到了这个 DOM 对象，并且我们在 mounted 这个钩子函数里，this.$nextTick 的回调函数中初始化 better-scroll 。 因为这个时候，wrapper 的 DOM 已经渲染了，我们可以正确计算它以及它内层 content 的高度，以确保滚动正常。 ```javascript // 默认情况下BScroll是不可以实时的监听滚动位置 // probeType 侦测 // 0,1都是不侦测实时的位置 // 2: 在手指滚动的过程中侦测, 手指离开后的惯性滚动过程中不侦测. // 3: 只要是滚动, 都侦测. ``` ### 上拉加载 pullUpLoad 类型：Boolean | Object，默认值：false 作用：这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，可以配置离底部距离阈值（threshold）来决定开始加载的时机 pullUpLoade参数一定要配合pullingUp，finishPullUp使用， pullingUp的触发时机是在一次上拉加载的动作后，一般用来去后端请求数据。 finishPullUp则是当上拉加载数据加载完毕后，需要调用此方法告诉 better-scroll 数据已加载，若没有调用此方法，则上拉加载的动作执行完一次就不能再次执行了 注意:： better-scroll不能再created（）{}里使用，因为此时还没有渲染页面DOM树，应在mounted（）{}中使用 ### better-scroll常用方法 ``` refresh() -> 重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常 scrollTo(x, y, time, easing) -> 滚动到指定的位置; x: X轴位置; y: Y轴位置; time: 到达指定位置所需时间，单位ms; easing: 动画函数(一般不建议修改) scrollBy(x, y, time, easing) -> 相对于当前位置偏移滚动 x,y 的距离； x: 当前位置偏移X轴的距离 y: 当前位置偏移Y轴的距离 time: 到达偏移位置所需时间，单位ms; easing: 动画函数(一般不建议修改) scrollToElement(el, time, offsetX, offsetY, easing) -> 滚动到指定的目标元素 el: 目标元素; time: 到达目标元素所需时间，单位ms; offsetX: 距离目标元素所偏移X轴的距离;设置为true时，到达目标元素中心位置 offsetY: 距离目标元素所偏移Y轴的距离;设置为true时，到达目标元素中心位置 easing: 动画函数(一般不建议修改) 使用示例： this.aBScroll.scrollToElement("li",300); ``` ------------------------------------------------------------------------------------------------------- <div id="div1"><h3> <font color=red > </font><h3></div> ==scroll.vue== ```javascript <template> <div class="wrapper" ref="wrapper"> <div class="content"> <slot></slot> </div> </div> </template> <script> import BScroll from 'better-scroll' export default { name: "Scroll", props: { probeType: { type: Number, default: 0 }, pullUpLoad: { type: Boolean, default: false } }, data() { return { scroll: null, message: '哈哈哈' } }, mounted() { // 1.创建BScroll对象 this.scroll = new BScroll(this.$refs.wrapper, { click: true, probeType: this.probeType, pullUpLoad: this.pullUpLoad }) // 2.监听滚动的位置 this.scroll.on('scroll', (position) => { // console.log(position); this.$emit('scroll', position) }) // 3.监听上拉事件 this.scroll.on('pullingUp', () => { this.$emit('pullingUp') }) }, methods: { scrollTo(x, y, time=300) { this.scroll.scrollTo(x, y, time) }, finishPullUp() { this.scroll.finishPullUp() } } } </script> <style scoped> </style> ```