VUE——滚动条的功能【iScroll 插件】

iScroll 是一个轻量级的 JavaScript 插件，专门用于在移动设备上实现平滑滚动效果。

先导入iScroll 插件

制作滚动条

HTML

<div ref="scroll-classify" class="classify-wrap">
    <div>
        <!-- 这里放置了许多 .classify-item 元素 -->
    </div>
</div>

ref=“scroll-classify”：这是 Vue 的引用机制，通过它可以方便地获取到 DOM 元素。

.classify-wrap：这是一个外部容器，设置了固定的宽度和高度，并且溢出的内容会被隐藏（overflow: hidden）。

内部的 < div> 包含了所有的 .classify-item 元素，这些元素的高度累积起来可能会超出 .classify-wrap 的高度，从而需要滚动。

CSS样式

.goods-main .classify-wrap {
    width: 1.72rem;
    height: 100%;
    overflow: hidden;
    margin-right: 3%;
  
}

.goods-main .classify-wrap .classify-item {
    width: 100%;
    height: 0.8rem;
    border-bottom: 1px solid #EFEFEF;
    background-color: #FFFFFF;
    font-size: 0.28rem;
    text-align: center;
    line-height: 0.8rem;
    overflow: hidden;
}

.classify-wrap 设置了固定的高度和宽度，同时 overflow: hidden 确保内容超出时不会直接显示滚动条。

.classify-item 是每个分类项的样式，高度为 0.8rem，当内容超出 .classify-wrap 的高度时，就需要滚动来查看。

JS

mounted() {
    this.$refs['scroll-classify'].addEventListener("touchmove", this.scrollPreventDefault);
    new IScroll(this.$refs['scroll-classify'], {
        scrollX: false, // 禁止水平滚动
        scrollY: true,  // 启用垂直滚动
        preventDefault: false // 不阻止默认事件
    });
},
methods: {
    scrollPreventDefault(e) {
        e.preventDefault(); // 阻止默认的 touchmove 事件
   		 }
	},
beforeDestroy() {
    this.$refs['scroll-classify'].removeEventListener("touchmove", this.scrollPreventDefault);
}

解释：
new IScroll() ：

1. 创建了一个 iScroll 实例，传入的目标是 .classify-wrap 容器。

   scrollX: false：禁止水平滚动。
   scrollY: true：启用垂直滚动。
   preventDefault: false：不阻止默认事件（如点击等）。

addEventListener(“touchmove”, this.scrollPreventDefault)

为了防止页面在滚动时触发浏览器的默认行为（例如页面整体滚动），添加了一个 touchmove 事件监听器，调用

1.e.preventDefault() 来阻止默认行为。
2.beforeDestroy() ：在组件销毁之前，移除 touchmove 事件监听器，避免内存泄漏。