5***@qq.com
5***@qq.com
  • 发布:2017-04-12 15:50
  • 更新:2017-11-17 15:26
  • 阅读:3402

MUI+vue2.0在采用ajax方式读入数据后,无法激活slide插件的滑动行为

分类:MUI

vm.$nextTick(function () {
mui("#slider").slider({
interval: 3000
});
})
这个方法也不管用了,有什么其他解决办法吗?

2017-04-12 15:50 负责人:无 分享
已邀请:
幽壑潜蛟

幽壑潜蛟

就是这方法没有用了。不知道楼主如何解决的。

一二三

一二三

我也遇到同样的问题,在使用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  
            });  
        });
  • 紫慕Yukari

    一样的,需要第一次手动去滑动后才正常,不知道怎么解决。。

    2018-04-02 16:26

4***@qq.com

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: ''

    }

    };


    var vm = new Vue({  
    el: '.mui-content',
    data: vm_data,
    }
    );

    就是vue渲染的数据

    2018-04-02 15:19

  • 紫慕Yukari

    我有个问题想问你一下,我现在这个轮播图自动滚动设置好了,但是渲染出来不能滚动,需要手动滑动一下才正常滚动,这是什么问题?一直解决不了,我用watch监听貌似也没用。。

    2018-04-02 16:24

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