我也不知道这种css效果的专业术语是什么，就如标题这么叫吧。。。
1、前言
- 在h5开发的过程中，轮播图下面放个类目的list（产品术语叫金刚区）是电商产品中很常见的布局，以前都是一行或两行排完，但是随着类目越来越多，出现了这么几种设计：1、最后一个类目为查看更多，点击跳转去一个新的页面；2、用swiper包裹，将多个类目当轮播图展示；3、类目scroll可滑动展示。最后一种展现设计方式出现的最晚，也是现在较为主流的展现方式，所以今天我们来实现下。
- 实现的方式：借助better-scroll库
- 实现的难点就是一个：对滚动条的处理
- 先看看手淘的效果：
手淘
2、BetterScroll
（1）介绍
- better-scroll库是一个很优秀的库，在作者2.0的版本中，我们实现一个基本的滚动只需引入它的核心滚动，体积也很小。更多可以去官网看看。
（2）安装
$ npm install @better-scroll/core@next --save
3、实现
（1）实现效果其实很简单，利用better-scroll暴露出的两个特性、translateX、Math对象
- maxScrollX：最大横向滚动位置，也就是整个宽度的大小，offsetLeft的感觉。
- scroll：监听scroll的方法，告诉你滚到哪里了。
- translateX：定义X轴的值，这里我们用百分比。
- Math.abs：将负数转为正数
（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>
4、其他
-
最后看看我们的实现效果（大致框架就是如此，效果自由发挥吧）：
效果 你可能感兴趣：
Ewall的简书
vscode+eslint让你编程快到飞起
手把手教你用vue+node+mongodb搭建一个小商场
小程序的因难见巧
看完你就该会git了
CSS日常踩坑后的总结
