然后去远足
然后去远足
  • 发布:2016-03-14 00:44
  • 更新:2021-09-26 15:02
  • 阅读:4713

解决MUI轮播组件在隐藏时初始化异常的问题

分类:MUI

【背景介绍】
  MUI 版本 2.8。
  在页面中使用了 Slider 组件(mui-slider),由于轮播面板的数量和内容都是动态从服务器端加载的,为了避免白屏,页面初始化时先设置 Slider 隐藏,同时有加载动画,等待加载完毕后再控制 Slider 显示。

【问题阐述】
  初始化:

var silder = mui(".mui-slider").slider();

  之后:

silder.nextItem();  
silder.prevItem();  
silder.gotoItem();

  均报 undefined 错误,定位到 mui.js 第 4699 行:

return this.pages[slideNumber][0];

  反复实验后发现,只有当 Slider 组件(包括其父容器)显示时,才不会抛异常。this.pages 正常应该是一个 N 维数组(N 取决于轮播区域数量),但异常时变成了一个一维数组。
  几经阅读代码,发现 mui.js 第 4658 行存在代码:

// 当slider处于隐藏状态时,导致snap计算是错误的,临时先这么判断一下,后续要考虑解决所有scroll在隐藏状态下初始化属性不正确的问题  
var currentPage = this.pages[this.loop ? 1 : 0];

  
【解决方案】
  在 Slider 组件显示后再执行初始化;或调用 slider.refresh(); 方法即可。

3 关注 分享
gaus 5***@qq.com Trust

要回复文章请先登录注册

8***@qq.com

8***@qq.com

回复 s***@163.com :
点赞
2021-09-26 15:02
s***@163.com

s***@163.com

回复 s***@163.com :
mui('.mui-slider').slider().refresh();

mui('.mui-slider').slider().gotoItem(0);
2021-06-03 16:11
s***@163.com

s***@163.com

回复 3***@qq.com :
这个是可以的
2021-06-03 16:11
k***@163.com

k***@163.com

回复 3***@qq.com :
解决了吗?如何解决的!
2018-03-20 11:38
李易峰知道吗

李易峰知道吗

解决了问题
2017-12-26 17:12
3***@qq.com

3***@qq.com

mui('.mui-slider').slider().refresh();
mui('.mui-slider').slider().gotoItem(0);
2017-10-17 23:47
3***@qq.com

3***@qq.com

从别的帖子里面看到 把mui-slider开始的全部都弄成动态生成的好用了,你的是怎么弄的呢
2016-11-07 11:50
3***@qq.com

3***@qq.com

也是遇到了这种问题,不过我这用了slider().refresh()还是不好用啊,还有是要怎么才能判断silder组件限时后的状态呢,我的情况现在是点击一下上面菜单就好用了
2016-11-07 10:44