sunny2018
sunny2018
  • 发布:2018-12-05 17:07
  • 更新:2020-10-07 18:23
  • 阅读:1725

关于mui-slider当分类标题是ajax加载的时候,移动到后面分类的无法无法自动滚动解决办法

分类:MUI

注意,我的问题不是说ajax加载出的分类不滑动了,而是滚动的时候不能自动定位。废话不多放,上图:


注意看一下,当我移到后面的时候菜单名称就不出来了,只有鼠标点击才出来。
关于:http://dev.dcloud.net.cn/mui/ui/#gallery 这里说的解决办法:
注意:mui框架会默认初始化当前页面的图片轮播组件;若轮播组件内容为js动态生成时(比如通过ajax动态获取的营销信息),则需要在动态生成完整DOM (包含mui-slider下所有DOM结构) 后,手动调用图片轮播的初始化方法;代码如下:

//获得slider插件对象  
var gallery = mui('.mui-slider');  
gallery.slider({  
  interval:5000//自动轮播周期,若为0则不自动播放,默认为0;  
});

试了并没有用,这个只能解决ajax拉数据后不能滚动的问题。

找了半天,看到mui框架里这段注释了(在代码的4837行,我用的版本是:v3.7.0 ):

    $.ready(function() {  
        //      setTimeout(function() {  
        $('.mui-slider').slider();  
        $('.mui-scroll-wrapper.mui-slider-indicator.mui-segmented-control').scroll({  
            scrollY: false,  
            scrollX: true,  
            indicators: false,  
            snap: '.mui-control-item'  
        });  
        //      }, 500); //临时处理slider宽度计算不正确的问题(初步确认是scrollbar导致的)  

    });

原来作者也找到这个问题了,还用了了临时的解决办法。是用的settimeout。可能考虑到影响整体效率又去掉了,这里我鄙视你一下。
我的解决办法
首先把这一段整体注释掉

    $.ready(function() {  
        //setTimeout(function() {  
        /*这里把默认的滚动去掉了,因为如果菜单是ajax调用的话,横向滚动无法自动移位  
        $('.mui-slider').slider();  
        $('.mui-scroll-wrapper.mui-slider-indicator.mui-segmented-control').scroll({  
            scrollY: false,  
            scrollX: true,  
            indicators: false,  
            snap: '.mui-control-item'  
        });*/  
        //      }, 500); //临时处理slider宽度计算不正确的问题(初步确认是scrollbar导致的)  
    });

然后在要用到slider的地方动态调用:

export default {  
    components:{  
        listData,  
    },    
    data(){  
        return{  
            catList:[],  
        }  
    },    
    methods:{  
        //栏目列表  
        getCatData:function(){  
            var obj=this;  
            this.$axios.get("/Cat/index/ajax/1/modelid/3/").then(function(response){  
                var data=response.data.info.data;  
                var count=response.data.info.count;  
                obj.catList=data;  
            })  
        },  
    },  
    mounted() {  
        //获取-栏目列表  
        this.getCatData();  
    },  
    updated:function(){  
        //mui切换  
        var slider=this.mui('.mui-slider');  
        slider.slider();  
    }     
}

我用的是vue框架开发的,如果你是用ajax的在你ajax拉出来后调用slider就可以了:

        var slider=this.mui('.mui-slider');  
        slider.slider();

看下成功后的效果吧:

1 关注 分享
Liz

要回复文章请先登录注册

Liz

Liz

感谢
2020-10-07 18:23
木杉丶

木杉丶

不错,很实用
2018-12-06 10:51