使用Vue-MUI轮播图失效问题解决案例（在Vue的update中执行）

       我使用的是mui+vue,社区关于轮播图失效的问题也有几个。我这边遇到的一个情况是我把所有的东西都写到plusReady事件中会导致轮播图搞死都不动，按照其他问答解决了vue生命周期等等的问题。提出来写没问题。放进去有不动了。

mui.plusReady(function() {
    //很多代码
});

结果在mui.js中看到mui会自动初始化轮播图。把这句注释掉就可以动了。

mui.js第5088行

//$(\'.mui-slider\').slider();

        //MUI框架初始化
        mui.init({});
        //HTML5+API准备就绪
        mui.plusReady(function() {
            var pageModel = new Vue({
                //插值符号
                delimiters: [\'{#\', \'#}\'],
                //绑定节点
                el: \'#vue-page\',
                //数据定义
                data: {
                    //轮播图列表[此处仅定义数据结构]
                    sliderLists: [{
                        title: \'\', //幻灯片标题
                        url: \'\', //幻灯片链接地址
                        image: \'\' //幻灯片图片地址
                    }]
                },
                //方法定义
                methods: {
                },
                //前置操作
                mounted: function() {
                    /**
                     * 赋值轮播图
                     * 1.先从本地缓存读取尽快呈现页面
                     * 2.如服务器有更新则后台下载更新
                     */
                    //获取本地存储
                    var sliderLists = plus.storage.getItem(\'sliderLists\');
                    if(sliderLists) {
                        //调试
                        console.log(sliderLists);

                    } else {  //使用默认数据
                        this.sliderLists = [{
                            title: \'\',
                            url: \'\',
                            image: \'../static/image/slider-01.jpg\'
                        }, {
                            title: \'\',
                            url: \'\',
                            image: \'../static/image/slider-02.jpg\'
                        }, {
                            title: \'\',
                            url: \'\',
                            image: \'../static/image/slider-03.jpg\'
                        }, {
                            title: \'\',
                            url: \'\',
                            image: \'../static/image/slider-04.jpg\'
                        }];
                    }
                },
                //更新
                updated: function() {
                    mui(\'#slider\').slider({
                        interval: 3000 //自动播放周期
                    });
                }
            });
        }); 

解决方案：

    而nextTick 主动渲染 Dom后，是无法获取到 mui（#slider）对象的。


mui("#slider").slider({
          interval: 3000
});

    在 Vue的生命周期钩子：updated 中 执行 代码如下：

updated: function() {
                var sliderMuiObj = mui("#slider");
                sliderMuiObj.slider({
                    interval: 3000
                });
            },

      

最后提供一个案例演示：【点击下载】