(thank you for solving the problem.) after vue-cli + mui switches pages, scrolling and carousel graphs cannot be used.

special weird
vue-cli + mui wrote
home page has a rotation picture, switch to another page and then switch back to the rotation map will be stuck, can not be used! How to solve it? mui-scroll can not scroll,
is not wrong, just contact soon, I hope you can help

Code:

<template>
    <div>
        <header id="header" class="mui-bar mui-bar-nav">
            <a href="-sharppopover" 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="-sharp">
                            <img src="../assets/yuantiao.jpg">
                        </a>
                    </div>
                    <!--  -->
                    <div class="mui-slider-item">
                        <a href="-sharp">
                            <img src="../assets/shuijiao.jpg">
                        </a>
                    </div>
                    <!--  -->
                    <div class="mui-slider-item">
                        <a href="-sharp">
                            <img src="../assets/muwu.jpg">
                        </a>
                    </div>
                    <!--  -->
                    <div class="mui-slider-item">
                        <a href="-sharp">
                            <img src="../assets/cbd.jpg">
                        </a>
                    </div>
                    <!--  -->
                    <div class="mui-slider-item">
                        <a href="-sharp">
                            <img src="../assets/yuantiao.jpg">
                        </a>
                    </div>
                    <!-- (:) -->
                    <div class="mui-slider-item mui-slider-item-duplicate">
                        <a href="-sharp">
                            <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("-sharpslidergyq").slider({
            interval: 5000
        });
    });
</script>
Jul.30,2021

what does it mean that you can't use it after switching pages? can't you use another page or this page now


I took a look. The problem should be that there was a problem initializing mui . The problem is as follows:

    When
  • executes mui ("- sharpslidergyq"). Slider (.) for the first time, it does work because the DOM node is selected and the code
  • is executed successfully.
  • but when you switch other routes, you should know that the exit of the routing component will be destroyed automatically, so when you return to this page, DOM renders again, but the carousel graph is initialized before and not re-executed, so there are problems you encounter
< hr >

solution

  • if your mui is global and can be obtained anywhere, please put the initialization code in any cycle of Vue cycle created~mounted
  • .
  • if it is not available in the cycle, you can register mui with the Vue prototype in main.js , and get
  • through this.xxx in the cycle.

Brother, have you solved the problem without me?

Menu