(解决问题有重谢)vue-cli + mui 切换页面之后就无法使用滚动和轮播图了

Question

特别的奇葩
vue-cli + mui 写的
首页有个轮播图,切换到其他页面再切换回去轮播图就卡死了,无法使用了!如何解决呢?mui-scroll也不能滚动了,
都没报错,刚接触不久,希望大家帮一下谢谢

代码:

<template>
    <div>
        <header id="header" class="mui-bar mui-bar-nav">
            <a href="#popover" id="openPopover" class="mui-icon mui-icon mui-icon-bars mui-pull-left"></a>
            <h1 class="mui-title">{{$route.name}}</h1>
            <a class="mui-icon mui-icon-chat mui-pull-right"></a>
        </header>
        <div class="mui-content">
            <!--轮播图开始-->
            <div id="slidergyq" class="mui-slider">
                <div class="mui-slider-group mui-slider-loop">
                    <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
                    <div class="mui-slider-item mui-slider-item-duplicate">
                        <a href="#">
                            <img src="../assets/yuantiao.jpg">
                        </a>
                    </div>
                    <!-- 第一张 -->
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="../assets/shuijiao.jpg">
                        </a>
                    </div>
                    <!-- 第二张 -->
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="../assets/muwu.jpg">
                        </a>
                    </div>
                    <!-- 第三张 -->
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="../assets/cbd.jpg">
                        </a>
                    </div>
                    <!-- 第四张 -->
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="../assets/yuantiao.jpg">
                        </a>
                    </div>
                    <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
                    <div class="mui-slider-item mui-slider-item-duplicate">
                        <a href="#">
                            <img src="../assets/shuijiao.jpg">
                        </a>
                    </div>
                </div>
                <div class="mui-slider-indicator">
                    <div class="mui-indicator mui-active"></div>
                    <div class="mui-indicator"></div>
                    <div class="mui-indicator"></div>
                    <div class="mui-indicator"></div>
                </div>
            </div>
        </div>
        <nav-components></nav-components>
    </div>
</template>

<script scoped>
    import navComponents from './nav.vue'
    export default {
        components: {navComponents},
        name: "gyq",
    }
    mui(function () {
        mui("#slidergyq").slider({
            interval: 5000
        });
    });
</script>

Answer 1

我看了一下，问题应该出在初始化mui的时候出现了问题，问题如下：

• 第一次执行mui("#slidergyq").slider(...)的时候，确实能行，因为选取到了DOM节点，并成功执行了代码
• 但当你切换其他路由后，你应该知道路由组件退出会自动销毁，所以当你在此返回此页面时，DOM重新渲染，但是轮播图却是之前初始化的，并没有重新执行，所以出现了你遇到的问题

---

解决办法

• 若你的mui是全局的，在任何地方都能获取到，那么请将初始化的代码放在Vue的周期created~mounted中的任何一个周期中
• 若周期中获取不到的话，可以在main.js中将mui注册到Vue原型上，在周期中通过this.xxx来获取

Answer 2

什么叫切换页面后就不能用了，是另一个页面不能还是现在这个页面

Answer 3

大哥 你解决了没有 我这也碰到这种问题了??