vue3使用mescroll-uni

Vue3 中使用 `mescroll-uni` 是为了实现基于 Vue 的响应式滚动组件。`mescroll-uni` 是一个轻量级、高度可定制化的微信小程序风格的滚动列表组件，它支持 Vue 3 的模板语法，并通过 Vue 的特性如指令、计算属性等无缝集成到 Vue 项目中。

在 Vue 3 中引入并使用 `mescroll-uni` 的步骤通常包括：

1. **安装依赖**：首先在项目中安装 `messcroll-uni` 组件，可以使用 npm 或者 yarn 进行安装：

   npm install mescroll-uni
   # 或者
   yarn add mescroll-uni

2. **导入并注册组件**：在你的 Vue 文件中，导入组件并注册到全局或局部使用范围：

   import { MScrollUni } from 'mescroll-uni'
   import { defineComponent } from 'vue'

   export default defineComponent({
     components: {
       MScrollUni,
     },
   })

3. **在模板中使用**：在需要滚动效果的地方，比如一个 `ul` 元素中，使用 `<MScrollUni>` 标签：

   <template>
     <div>
       <ul ref="scrollList">
         <li v-for="(item, index) in items" :key="index">{{ item }}</li>
       </ul>
       <MScrollUni :ref="'scrollInstance'" :scrollY="true" @scrollEnd="onScrollEnd" />
     </div>
   </template>

   // 在 script 部分绑定数据和事件处理函数
   <script>
     export default {
       data() {
         return {
           items: ['Item 1', 'Item 2', ...],
         };
       },
       mounted() {
         this.$refs.scrollInstance.init();
       },
       methods: {
         onScrollEnd() {
           console.log('Scroll ended');
         },
       },
     }
   </script>

4. **配置选项**：根据需求调整组件的样式、滚动设置等，可以在标签上添加 `:options` 属性传递配置项。