使用better-scroll插件实现菜单栏的联动

公子航

已于 2023-04-02 14:38:28 修改

阅读量274

点赞数

文章标签： javascript 前端 vue.js

于 2023-03-30 14:53:10 首次发布

本文链接：https://blog.youkuaiyun.com/m0_65315526/article/details/129856854

版权

本文介绍了如何在前端项目中使用better-scroll插件来实现菜单栏的联动效果。通过详细代码展示安装过程，并着重解决了两个常见问题：一是better-scroll未生效，需要确保滚动区域有且只有一个子元素且高度足够；二是点击事件被触发两次，解决方案是在初始化时禁用better-scroll的click和preventDefault选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装better-scroll(BetterScroll)

npm install @better-scroll/core --save

// or

yarn add @better-scroll/core

详细代码如下

<template>
  <div class="goods-container">
    <!-- 左侧侧边导航栏 -->
    <div class="goods-left">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          :title="item.name"
          v-for="(item, index) in goodsData"
          :key="index"
          @click="handleSidebar"
        />
      </van-sidebar>
    </div>

    <!-- 右侧内容 -