Vue+better-scroll：实现商品菜单动态映射的完整代码示例

在Vue项目中，利用better-scroll库实现菜单映射功能是一个常见的需求，尤其是在开发响应式且交互性强的页面时。这个例子展示了如何在Vue组件中整合better-scroll来管理菜单列表的滚动和状态切换。 首先，让我们看下组件的结构： ```html <template> <div class="goods"> <!-- 左侧区域 --> <div class="menu-wrapper" ref="left"> <ul class="menu"> <li class="menu-item border-bottom" :class="{ 'current': currentIndex === index }" v-for="(item, index) in dataLlist.goods" :key="index" @click="selectIndex(index, $event)" ref="menuList" > <div class="text"> <goods-icon v-if="item.type > 0" :index="item.type" class="text-ico"></goods-icon> {{ item.name }} </div> </li> </ul> </div> <!-- 右侧区域 --> <div class="foods-wrapper" ref="right"> <ul> <li class="food-list food-list-hook" v-for="(item, index) in dataLlist.goods" :key="index" > <!-- 标题区域 --> <h1 class="border-left">{{ item.name }}</h1> <ul> <li class="food-item border-bottom" v-for="(foodItem, index) in item.foods" > <div class="food-image"> <img :src="foodItem.icon" alt="foodItem.name" /> </div> <div class="food-desc"> <div class="title">{{ foodItem.name }}</div> <div class="desc">{{ foodItem.description }}</div> <div class="num"> <div class="sellCount">月售{{ foodItem.sellCount }}份</div> <div class="ratio"></div> </div> </li> </ul> </li> </ul> </div> </div> </template> ``` 关键知识点包括： 1. better-scroll集成：`better-scroll` 是一个轻量级的滚动组件，用于实现平滑滚动效果。在模板中，`ref="left"` 和 `ref="right"` 属性分别给左侧和右侧区域添加了ref属性，便于后续绑定scroll实例。 2. 菜单项的映射与状态管理：`v-for`指令用于遍历`dataLlist.goods`数组中的每个商品，`:class`绑定当前选中项（`'current': currentIndex === index`）以实现高亮效果。点击事件`@click="selectIndex(index, $event)"`将被触发，`selectIndex`函数会更新`currentIndex`并可能触发相应的数据同步或路由跳转。 3. 商品图标显示：`goods-icon`组件是根据`item.type`值动态显示的，通过`:v-show="item.type > 0"`来控制其显示。 4. 右侧区域的列表展示：每个商品都有自己的子列表（如食物列表），通过嵌套的`v-for`循环展示详细信息，包括图片、名称、描述和销售数据等。 5. 组件交互性：此组件通过Vue的响应式特性，能够实时反映菜单项的状态变化，用户操作（如点击）将直接影响到右侧内容的呈现。 这个Vue项目利用better-scroll实现了灵活且高效的菜单导航，用户可以轻松地在左侧菜单选择商品类型，然后在右侧详细展示相关信息，增强了用户体验。通过这种方式，开发者能够轻松管理滚动行为，并保持页面结构和数据同步。