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

使用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( $.trim($ (this).text()) - 1);//实现滚动到指定的题目

上面这些可以实现想要的功能，
问题：
1：分页加载题目，先加载10道题当用户滑道第10题页面的时候，在加载下面的10道题
2：当我那个动态的改变vue中变量的值时，动态数据已经加载到页面中了
3：点击下一题按钮时已经触发了mui(’#slider’).slider().nextItem();事件但是就是跳转不了
4：需要先滑动一下，然后点击下一题，这时候会正常跳转。
解决方法
在初始化时我们初始化了mui slider 这个组件但是现在slider中的数据发生了改变，虽然已经加载到界面上了，但是后面加载进来的并未进行初始化，因此解决方法如下，在Vue的update中加入下面一段代码，当vue中数据改变时重新初始化：

updated: function () {
            var gallery = mui('.mui-slider');
            gallery.slider({
                interval: 0 //自动轮播周期，若为0则不自动播放，默认为0；
            });
        }

新的问题：
当每个子元素中的内容高度相同时看不出来问题，都可以正常使用，但是当子元素中的内容高度不同时，有的内容偏高，有的内容偏低时，就会出现子元素撑开了父元素的高度，是的所有的元素都会出现上下滚动的效果。
这样当我们在高度过高的页面滑动到底部时切换到一个页面高度较低的页面时会出现一片空白什么都没有，需要手动滑动到顶部才能看到内容。同时当手指有向右或者向左偏移时会自动切界面，体验效果不好。

解决方法，刚开始是准备禁掉左右滑动事件然后只留下下面的上一题，下一题的点击切换事件，但是我发现当我禁掉左右滑动事件之后，上一题和下一题的点击事件也点击不了了，我禁用的方法是：

var gallery = mui('.mui-slider');
            gallery.slider({
                interval: 0 //自动轮播周期，若为0则不自动播放，默认为0；
                bounce: false
            });

自己也网上查了一些方法，但是没有效果，这种方法放弃了，没有达到想要的效果。

于是就用了下面的方法：
将上面的HTML代码结构改为下面的

<div id="slider" class="mui-slider" style="overflow-y:scroll;">
            <div class="mui-slider-group" style="height:100%;">
                <div class="mui-slider-item mui-control-content" v-for="item in dataList">
                    <div class="mui-scroll-wrapper" style="height:100%;">
                        <div class="mui-scroll" style="width:auto;">
                            <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" />
                            <p v-if="item.remark" class="answer-analysis" v-bind:data-analysis="item.remark"><span>答案解析 ></span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Js代码改为如下：

updated: function () {
            var gallery = mui('.mui-slider');
            gallery.slider({
                interval: 0 //自动轮播周期，若为0则不自动播放，默认为0；
            });
            mui.init({ swipeBack: false, });
            var deceleration = mui.os.ios ? 0.003 : 0.0009;
            mui('.mui-scroll-wrapper').scroll({
                bounce: false,
                indicators: false, //是否显示滚动条
                deceleration: deceleration
            });
        }

document.querySelector('.mui-slider').addEventListener('slide', function (event) {
        window.scrollTo(0, 0);
    });

其余的没有变动，变动的样式已经以内联样式的方法写出来了
样式代码：

body, html, .mui-content {
    height: 100%;
}

.content-head {
    background-color: #fff;
    position: fixed;
    width: 100%;
    z-index: 10;
    padding: 15px 15px 8px 15px;
    border-bottom: 20px solid #efeff4;
}

    .content-head h4 {
        line-height: 1.5;
    }

.content-footer {
    height: 50px;
    display: flex;
    flex-direction: row;
    width: 100%;
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 10;
}

    .content-footer .mui-btn {
        flex: 1;
        border: 0px;
        height: 100%;
    }

        .content-footer .mui-btn:disabled {
            background-color: #F2F2F2;
            color: #ccc;
        }

.next-question {
    background-color: #f33f30;
    color: #fff;
    border-radius: 0px;
    border-top: 1px solid #f33f30;
}

.before-btn {
    border-top: 1px solid #e4e4e4 !important;
}

.test-content {
    padding-top: 160px;
    background-color: #fff;
    height: 100%;
    padding-bottom:65px;
}

.number-question {
    float: right;
}

.content-head > div {
    margin-top: 15px;
}

.number-question > span {
    font-weight: bold;
    font-size: 26px;
    color: #333;
}

.test-time {
    display: inline;
}

.clock-icon {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    background-image: url("/image/clock_icon.png");
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    vertical-align: -3px;
}

.test-card {
    width: 55px;
    height: 55px;
    line-height: 55px;
    border-radius: 50%;
    z-index: 10;
    position: fixed;
    bottom: 60px;
    right: 8px;
    border: 1px solid #e4e4e4;
    background-color: #e4e4e4;
    text-align: center;
    font-size: 12px;
    color: #0094ff;
}

.mui-slider {
    height: 100%;
}

.mui-slider-item {
    padding: 8px 15px 51px 15px;
    background-color:#fff;
}

.question-title {
    padding-top: 20px;
    padding-bottom: 8px;
    font-size: 16px;
    color: #333;
    line-height: 1.5;
}

.mui-table-view-cell {
    padding-left: 0px;
    background-color:#fff;
}

    .mui-table-view-cell:after {
        left: 0px;
        background-color: #e4e4e4;
    }

    .mui-table-view-cell:last-child:after {
        height: 1px;
    }

.choose-content {
    width: 100%;
    /*display: inline-block;*/
    display:flex;
    flex-direction:row;
}

    .choose-content input[type=radio],.choose-content input[type=checkbox] {
        display: none;
    }
    .choose-content img {
        flex:1;
        width:80% !important;
    }
    .choose-btn {
        width: 25px;
        height: 25px;
        line-height: 24px;
        text-align: center;
        border: 1px solid #e4e4e4;
        display: inline-block;
        border-radius: 50%;
        margin-right: 10px;
    }

.choose-btn-active {
    color: #fff;
    border: #fff;
    background-color: #f33f30;
    border: 1px solid #f33f30;
}

.test-card-content {
    position: fixed;
    left: 0px !important;
    bottom: 0px;
    border-radius: 0px;
    width: 100%;
}

.mui-scroll-wrapper {
    padding-left: 15px;
    padding-right: 15px;
    height: 200px;
}

这样可以解决掉上面的问题。
体验还不错，要是有更好的解决方法，欢迎留言

扫描二维码关注公众号，回复： 6190388 查看本文章

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

猜你喜欢