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, {})123
better-scroll 对外暴露了一个 BScroll 的类，我们初始化只需要 new 一个类的实例即可。第一个参数就是我们 wrapper 的 DOM 对象，第二个是一些配置参数。
better-scroll 的初始化时机很重要,我们在初始化它的时候，必须确保父元素和子元素的内容已经正确渲染了。如果没有办法滑动，那就是初始化的时机不对。
this.$nextTick(() => {
this.scroll = new Bscroll(this.$refs.wrapper, {}) })
}
this.$nextTick()这个方法作用是当数据被修改后使用这个方法会回调获取更新后的dom再render出来
如果不在下面的this.$nextTick()方法里回调这个方法，数据改变后再来计算滚动轴就会出错
sell-goods组件中的问题
先介绍一下左右俩边实现同步的原理
- 当右边滑动时，左边实现同步
在data中定义listHeight[]数组，记录每一个产品分类的高度和它之上所有的产品高度;在data中同时定义scrollY=0;并实时记录scrollY的值与它上下俩个产品的高度比较，在组件内判断当前产品的下标是否与所得下标相等，实时绑定class来改变此时左边的样式。 - 当左边点击时，右边同步跳转
拿到当前点击的产品的下标，传入selectMenu函数,通过在所有的产品中找到该产品元素后，让他滚动到位置。
this.foodsScroll.scrollToElement(el, 300);
<script type="text/ecmascript-6">
import BScroll from 'better-scroll';
const ERR_OK = 0;
export default{
props: {
seller: {
type: Object
}
},
data () {
return {
goods: [],
listHeight: [],
scrollY: 0
};
},
computed: {
currentIndex() {
for (let i = 0; i < this.listHeight.length; i++) {
let height1 = this.listHeight[i];
let height2 = this.listHeight[i + 1];
if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
return i;
}
}
return 0;
}
},
created () {
this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
this.$http.get('/api/goods').then((response) => {
response = response.body;
if (response.errno === ERR_OK) {
this.goods = response.data;
this.$nextTick(() => {
this._initScroll();
this._calculateHeight();
});
}
});
},
methods: {
selectMenu (index, event) {
if (!event._constructed) {
return;
}
let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
let el = foodList[index];
this.foodsScroll.scrollToElement(el, 300);
},
_initScroll: function () {
this.menuScroll = new BScroll(this.$refs.menuWrapper, {
click: true
});
this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
probeType: 3
});
this.foodsScroll.on('scroll', (pos) => {
this.scrollY = Math.abs(Math.round(pos.y));
});
},
_calculateHeight() {
let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
let height = 0;
this.listHeight.push(height);
for (let i = 0; i < foodList.length; i++) {
let item = foodList[i];
height += item.clientHeight;
this.listHeight.push(height);
}
}
}
};
</script>
- 首先我们先来看一下1.0 和2.0 版本上的区别
- dom元素的获取
1.0中 v-el='a-b'值是在js中引用的元素名，可以不同
2.0中 rel='aB'
二者的命名遵循的规则不同 - 在js中的引用作为BScroll实例的参数传入
1.0 this.$els.a-b
2.0 this.$rels.aB
- 当我们初始化的时候，即没有给第二个参数即配置信息时，
this.menuScroll = new BScroll(this.$refs.menuWrapper);
默认在移动端阻止了默认的事件click，所以我们获取不到正确的下标，
然而pc端浏览器依然可以执行原生的click事件，在pc情况下我们可以获取到下标
（当给定第二个参数click:true时）
this.menuScroll = new BScroll(this.$refs.menuWrapper, {
click: true
});
此时pc端会派发俩次点击事件，俩次得到下标，显然是不合理的，我们通过移动端派发的点击事件独有的event._constructed属性来监控此时的派发点击事件的次数。
-
probeType
- 类型：Number
- 默认值：0
- 可选值：1、2、3
- 作用：有时候我们需要知道滚动的位置。
- 当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后）派发[scroll 事件；
- 当 probeType 为 2 的时候，会在屏幕滑动的过程中实时的派发 scroll 事件；
- 当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。
初始化时
this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
probeType: 3
});
this.foodsScroll.on('scroll', (pos) => {
this.scrollY = Math.abs(Math.round(pos.y));
});
一篇很详细的文章推荐https://www.imooc.com/article/18232
