我也遇到同样的问题,在使用mui的switch的时候也是有这样的问题,手动调用插件也不起作用。下面是我的代码,大家有什么解决办法没
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="javascript:;"><img :src="lastImg"></a>
</div>
<div class="mui-slider-item" v-for="img in imgs">
<a href="javascript:;"><img :src="img"></a>
</div>
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="javascript:;"><img :src="firstImg"></a>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active" v-for="(img, index) in imgs" v-if="index==0"></div>
<div class="mui-indicator" v-else></div>
</div>
</div>
var app = new Vue({
el: '#app',
data: {
detailData: ''
},
computed: {
imgs: function () {
if (!this.detailData) return [];
return this.detailData.imgs.split(";").map(function (item) {
return $.imgPath + item;
});
},
firstImg: function () {
if (!this.detailData) return "";
return $.imgPath + this.detailData.imgs.split(";")[0];
},
lastImg: function () {
if (!this.detailData) return "";
return $.imgPath +
this.detailData.imgs.split(";")[this.detailData.imgs.split(";").length-1];
}
}
});
Vue.nextTick(function () {
// DOM 更新了
console.log("update");
mui("#slider").slider({
interval: 3000
});
});
4 个回复
幽壑潜蛟
就是这方法没有用了。不知道楼主如何解决的。
一二三
我也遇到同样的问题,在使用mui的switch的时候也是有这样的问题,手动调用插件也不起作用。下面是我的代码,大家有什么解决办法没
紫慕Yukari
一样的,需要第一次手动去滑动后才正常,不知道怎么解决。。
2018-04-02 16:26
4***@qq.com
同求
滟子
vm.$watch('items', function (newValue, oldValue) {
var slider = mui("#slider");
slider.slider({
interval: 500
});
}
我用这个好用~
紫慕Yukari
items是什么?
2018-04-02 14:58
滟子
var vm_data = {
items: {
primaryProduct: '',
secondaryProduct: '',
attornProduct: '',
slide: '',
first: '',
last: ''
}
};
就是vue渲染的数据
2018-04-02 15:19
紫慕Yukari
我有个问题想问你一下,我现在这个轮播图自动滚动设置好了,但是渲染出来不能滚动,需要手动滑动一下才正常滚动,这是什么问题?一直解决不了,我用watch监听貌似也没用。。
2018-04-02 16:24