移动端开发---菜单栏与商品左右联动

我是代码

已于 2023-10-16 14:22:16 修改

阅读量629

点赞数

文章标签： vue.js javascript 前端

于 2023-10-09 11:45:23 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44883077/article/details/133696777

版权

本文介绍了如何在Vue2项目中使用better-scroll和mouse-wheel插件实现菜单与商品的左右联动滚动效果，包括HTML结构的设置、JavaScript代码的实现以及CSS样式调整。

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

效果图

在这里插入图片描述

用到的插件 — better-scroll

在项目中引入两个包

better-scroll 滚动的核心库
@better-scroll/mouse-wheel 该插件的作用是可以使用鼠标滚动

代码实现

使用vue2结合better-scroll实现菜单与商品左右联动

这里截取better-scroll官网的说明，有兴趣可以去阅读官网：https://www.wenjiangs.com/doc/2fh58adz
在这里插入图片描述

html部分

<!-- 注意事项
	1.BetterScroll 默认处理容器的第一个子元素的滚动，其它的元素都会被忽略。按照我下面的HTML嵌套结构
	2.必须给容器设置高度，且overflow为hidden
	3.如果容器外层还有父元素，父元素也必须设置高度
	4.满足以上条件better-scroll的滚动效果才能生效
-->


<!-- 左侧导航栏 -->
<div ref="siderMenu" class="pkg-content-detail__left">
  <div class="sider-menu">
    <div
      :key="index"
      :class="index === activeKey ? 'active' : ''"
      v-for="(menu, index) in menuList"
      ref="menuItem"
      class="menu-item"
      @click="handleClickMenu(index)"
    >
   	  <span>{
  { menu.name}}</span>
    </div>
    <!-- 占位 -->
    <div :style="{ height: calc(100% - customHeight) }" v-if="menuList.length < 10" style="background: #f7f7f7;"></div>
  </div>
</div>
<!-- 右侧商品区域 -->
<div ref="goodsContainer" class="pkg-content-detail__right">
  <div ref="pkgItemContainer" class="content">
    <div
      :key="index"
      v-for="(good, index) in goodsList"
      class="pkg-content-detail__right-item"
    >
      <!-- 该组件为商品的详情组件，可根据自己的需求自行封装 -->
      <add-goods-item :goodsGroup="good"/>
    </div>
    <!-- 这里是滑动到丢展示的文字，样式可以自行调整 -->
    <div style="padding: 30px 0 310px; color: #666; font-size: 14px; text-align: center

最低0.47元/天解锁文章