幽壑潜蛟
幽壑潜蛟
  • 发布:2017-04-13 14:51
  • 更新:2018-03-08 17:36
  • 阅读:5106

MUI轮播图失效问题解决案例

分类:MUI

我使用的是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 //自动播放周期  
                    });  
                }  
            });  
        });
2017-04-13 14:51 负责人:无 分享
已邀请:
buubto

buubto - it

谢谢 解决问题

NSK

NSK

谢谢 解决问题

everyday666

everyday666

这边好像自动轮播失效啊?请问怎么解决

  • 付楚

    你好,我最近也遇到了这个问题,请问你的这个有解决了吗?

    2018-08-14 10:24

该问题目前已经被锁定, 无法添加新回复