我使用的是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 //自动播放周期
});
}
});
});
3 个回复
buubto - it
谢谢 解决问题
NSK
谢谢 解决问题
everyday666
这边好像自动轮播失效啊?请问怎么解决
付楚
你好,我最近也遇到了这个问题,请问你的这个有解决了吗?
2018-08-14 10:24