在 Vue3 中使用 BetterScroll 解决各种滚动场景

BetterScroll 官网

BetterScroll 零依赖，基于原生 JS 实现，不依赖任何框架，不管是 Vue2、Vue3、React 或者其他框架都可以直接使用。

安装

@better-scroll/core 和 better-scroll 的区别：

• 只需要基础滚动能力使用 @better-scroll/core
• 需要全部插件能力使用 better-scroll
• 体积差异

npm i @better-scroll/core

# OR

npm i better-scroll

使用

Vue3 demo

<script setup lang="ts">
import BScroll from '@better-scroll/core'
import { nextTick, ref } from 'vue'

const wrapper = ref()

nextTick(() => {
	// 具体配置项见：https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html
	new BScroll(wrapper.value, { scrollX: true })
})
</script>

<template>
	<div class="scroll-container">
		<div class="wrapper" ref="wrapper">
			<div class="tabs">
				<div class="tabs-item" v-for="item in 30" :key="item">{{ item }}</div>
			</div>
		</div>
	</div>
</template>

<style lang="less" scoped>
.scroll-container {
	width: 500px;
	.wrapper {
		overflow: hidden;
		width: 90%;
		white-space: nowrap;
		cursor: grab;
		.tabs {
			/* 如果是 div 一定要设置为 inline-block，否则没有滚动效果。
			原因：div 宽 100% 没有超出 wrapper 的宽度，设置为 inline-block 宽度由内容撑开。
			只有宽度超出才会有滚动效果。 */
			display: inline-block;
			.tabs-item {
				display: inline-block;
				width: 100px;
				height: 30px;
			}
		}
	}
}
</style>