手淘
(1)介绍
(2)安装
$ npm install @better-scroll/core@next --save
(1)实现效果其实很简单,利用better-scroll
暴露出的两个特性、translateX
、Math
对象
(2)用better-scroll提供的方法计算出目前列表滚动位置占整个宽度的百分比比,然后赋予translateX,就可以实现两者实时的同步滚动了。代码:
<template>
<div class="home-category">
<div class="scroll-wrapper" ref="scroll">
<div class="scroll-content" ref="test">
<div class="scroll-item" v-for="(item, index) in cateList" :key="index">
<p class="text">{{item}}</p>
</div>
</div>
</div>
<div class="dot-wrapper">
<div class="dot" :style="{'transform': `translateX(${rate})`}"></div>
</div>
</div>
</template>
<script>
import BScroll from '@better-scroll/core';
export default {
data() {
return {
rate: 0,
cateList: [1, 2, 3, 4, 5, 6, 7],
};
},
mounted() {
this.init();
},
beforeDestroy() {
this.bs.destroy();
},
methods: {
init() {
this.bs = new BScroll(this.$refs.scroll, {
scrollX: true,
click: true,
probeType: 3, // listening scroll hook
});
const totalX = Math.abs(this.bs.maxScrollX);
this._registerHooks(['scroll'], (pos) => {
const currentX = Math.abs(pos.x);
this.rate = `${Number((currentX / totalX) * 100).toFixed(2)}%`;
});
},
_registerHooks(hookNames, handler) {
hookNames.forEach((name) => {
this.bs.on(name, handler);
});
},
},
};
</script>
<style lang="scss" scoped>
.home-category {
.scroll-wrapper {
width: 100%;
white-space: nowrap;
overflow: hidden;
}
.scroll-content {
display: inline-block;
.scroll-item {
// box-sizing: content-box;
height: 50px;
font-size: 24px;
display: inline-block;
text-align: center;
background: red;
padding: 0 32px;
line-height: 50px;
margin: 0 10px;
.text {
width: 88px;
}
}
}
.dot-wrapper {
width: 80px;
height: 4px;
background: rgba(0, 0, 0, 0.1);
border-radius: 3px;
margin: 0 auto;
margin-top: 20px;
overflow: hidden;
.dot {
box-sizing: border-box;
width: 40px;
height: 4px;
background: #f96c1d;
transition: all 0.4s linear;
}
}
}
</style>