注意，我的问题不是说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();
看下成功后的效果吧：
