Vue-better-scroll 实例：商品列表与菜单导航

本文档详细介绍了如何在Vue应用中使用`vue-better-scroll`库实现一个商品列表滚动功能的实例代码。首先，确保已经通过npm安装了`better-scroll`库，通过以下命令进行安装： ``` npm install better-scroll -S ``` 接下来，我们看到一个`goods`页面的模板，它由两个主要部分组成：菜单区（menu-wrapper）和商品详情区（foods-wrapper）。菜单区使用`v-for`指令遍历`items`数组，并显示每个菜单项的名称和图标，其中`item.type > 0`用于显示带有条件的图标。 ```html <template> <div class="goods"> <div class="menu-wrapper" ref="menuWrapper"> <ul> <li v-for="item in goods" class="menu-item"> <span class="text border-1px"> <span v-if="item.type > 0" class="icon" :class="classMap[item.type]"></span> {{ item.name }} </span> </li> </ul> </div> <div class="foods-wrapper" ref="foodsWrapper"> <!-- ... 商品详情列表 ... --> </div> </div> </template> ``` 在JavaScript部分，我们需要实例化`better-scroll`并将其应用到对应的DOM元素上。这里假设我们有对应的`classMap`对象来映射不同的图标类名，并且`goods`数据已从后端获取或来自组件的局部状态。这部分代码没有提供，但通常会包括以下步骤： ```javascript <script type="text/ecmascript-6"> import BScroll from 'better-scroll'; export default { data() { return { goods: [], // 假设这是从接口获取的商品数据 classMap: { ... }, // 图标类名映射对象 }; }, mounted() { this.$refs.menuWrapper.addEventListener('scroll', this.menuScrollHandler); this.$refs.foodsWrapper.bscroll = new BScroll(this.$refs.foodsWrapper, { // 设置better-scroll配置选项 scrollY: true, // 水平滚动 scrollX: false, momentum: true, bounce: true, }); }, methods: { menuScrollHandler(e) { // 处理菜单滚动事件，可以根据需求触发某些操作 } }, beforeDestroy() { this.$refs.foodsWrapper.bscroll.destroy(); // 销毁better-scroll实例以释放资源 }, }; </script> ``` 在这个例子中，`vue-better-scroll`用于实现流畅的滚动效果，并且可以添加自定义的滚动事件处理函数。通过`ref`属性，我们可以轻松地在Vue组件的生命周期方法中对滚动容器进行初始化和销毁。整体来说，这个实例展示了如何将`better-scroll`与Vue结合，提高页面的滚动性能和用户体验。