better-scroll示例

以下是一个使用 BetterScroll 的简单示例：

HTML 代码：

<div class="wrapper">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>

CSS 代码：

.wrapper {
  height: 200px;
  overflow: hidden;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  white-space: nowrap;
}

li {
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #eee;
  margin-right: 5px;
}

JavaScript 代码：

import BScroll from 'better-scroll';

const wrapper = document.querySelector('.wrapper');
const scroll = new BScroll(wrapper, {
  scrollX: true,
  scrollY: false,
  click: true
});

以上代码将创建一个宽度为 200px，高度为 200px 的容器，其中包含一个水平的列表。BetterScroll 将在该容器上启用滚动功能，并且允许单击列表项。