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