使用Vue 与 mui slider scroll框架遇到的问题记录

本文记录了在使用Vue.js和mui框架开发移动端应用时，遇到的slider滚动组件的问题。主要包括分页加载、动态数据更新、点击事件失效及元素高度不一致导致的显示问题，并详细介绍了各个问题的解决办法，提供了代码示例和样式调整策略，旨在提供一种可行的解决方案。

使用mui框架作为移动端开发的前端框架，使用vue作为前端与后端数据对接的框架，在使用过程中遇到了一些问题现整理如下：框架的版本号：Mui v3.7.2 Vue.js v2.6.10
需求描述：如下图所示，可以实现左右滑动切换题目，同时点击下面的上一题下一题也可以进行题目的切换，点击对应的题号可以跳转到对应题号的界面
在这里插入图片描述
第一种实现方式：
使用mui 的slider 的轮播这个组件
HTML代码：

<div class="test-content">
          <div class="mui-slider" id="slider">
               <div class="mui-slider-group">
                   <div class="mui-slider-item" v-for="item in dataList">
                       <h4 class="itemtype">{
  
  {item.itemType==1?'单选':(item.itemType==2?'多选':'判断')}}</h4>
                       <p class="question-title">{
  
  {item.content}}</p>
                       <img v-if="item.content_ImageUrl" :src="item.content_ImageUrl" alt="Alternate Text" />
                   </div>
               </div>
           </div>
    </div>

JS代码：主要用到的就是监听slider事件处理相应的操作

document.querySelector('.mui-slider').addEventListener('slide', function (event) {
		$('.current-question').text(event.detail.slideNumber + 1);//界面上显示当前的题号
        window.scrollTo(0, 0);
    });

同时slider主要用到的方法有：
mui(‘#slider’).slider().nextItem();//实现滚动到下一题
mui(‘#slider’).slider().prevItem();//实现滚动到上一题
mui(‘#slider’).slider().gotoItem(