Trust
Trust
  • 发布:2017-03-03 18:59
  • 更新:2021-03-03 11:50
  • 阅读:25053

【文档】mui.slider轮播组件常用API

分类:MUI

组件介绍

轮播组件是mui提供的一个核心组件,在该核心组件基础上,衍生出了图片轮播、可拖动式图文表格、可拖动式选项卡、左右滑动9宫格等组件。

示例

获取slide组件对象

var slider = mui('#slider').slider();  

常用API

gotoItem(index)
切换到指定轮播

slider.gotoItem(1); //切换至第二个轮播  

prevItem()
上一个轮播

slider.prevItem();  

nextItem()
下一个轮播

slider.nextItem();  

getSlideNumber()
当前所处位置

slider.getSlideNumber();  

stopped
禁用/开启滑动切换

slider.stopped = false; //开启滑动切换  
slider.stopped = true; //关闭滑动切换  

更多

附上一个简单的示例,解压后将html文件放在mui工程的根目录下即可预览效果。
更多关于slide组件的介绍,参考mui官方文档

PS:关于slide组件,使用过程中如有更多的疑问,请在下方留言。

3 关注 分享
超人爷爷 5***@qq.com 1***@qq.com

要回复文章请先登录注册

沐清风

沐清风

回复 Trust :
动态生成,手动初始化了。
mui('#slider'+i).slider({
interval:2000,
stopped:true,
});
初始化之后需要手动滑动,之后才会变成自动。不手动滑动,就会报错
Cannot read property '0' of undefined
2018-07-13 17:50
9***@qq.com

9***@qq.com

回复 1***@qq.com :
要先获取slider组件对象
2018-04-08 09:53
9***@qq.com

9***@qq.com

回复 9***@qq.com :
写错了
document.getElementsByTagName('li')[e.detail.slideNumber].classList.add('active');
2018-04-08 09:51
9***@qq.com

9***@qq.com

回复 1***@qq.com :
document.getElementById('swiperBox').addEventListener('slide', function(e) {

document.querySelector('.nav-list li.active').classList.remove('active');
document.getElementsByName('.nav-list li')[e.detail.slideNumber].classList.add('active');

});
2018-04-08 09:44
1***@qq.com

1***@qq.com

slider.gotoItem(1);跳转不起
2018-03-22 11:07
1***@qq.com

1***@qq.com

里面不支持JQ写法,怎么办?

(function($) {
document.getElementById('swiperBox').addEventListener('slide', function(e) {

if (e.detail.slideNumber === 0) {
$(".nav-list li").eq(0).addClass("active").siblings().removeClass("active");

} else if (e.detail.slideNumber === 1) {


}else if (e.detail.slideNumber === 2) {
$(".nav-list li").eq(2).addClass("active").siblings().removeClass("active");

}else if (e.detail.slideNumber === 3) {
$(".nav-list li").eq(3).addClass("active").siblings().removeClass("active");

}
});
})(mui);
2018-03-21 17:27
5***@qq.com

5***@qq.com

回复 Trust :
silder 组件问题也太多了吧,上下滑动就会切换组件,还报Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted. 做成组件起码解决下上下滑动切换item的问题吧,请问官方要怎么给出解释,文档不全也就算了,你个功能都有问题为什么要发布出来。
2017-09-13 11:02
1***@qq.com

1***@qq.com

slider.gotoItem(1,300)可以控制跳转时间。而slider.nextItem()怎样控制跳转时间? 试了slider.nextItem(30)无效。。。
2017-08-07 00:03
qq58485273

qq58485273

禁止了滑动切换以后,用按钮控制切换,第一次点击按钮,切换没问题,第二次切换就切换不了了,原因是禁止了滑动切换后getSlideNumber()获取的始终是0。请问大家遇到了吗?怎么处理的?我暂时自己增加了个变量来记录当前选中值。
2017-08-01 17:04
4***@qq.com

4***@qq.com

轮播组件如果内容出现滚动条 那么上下滚动的时候会触发左右切换 请问大神们 怎么解决?目前我是直接禁用手势滑动处理的
2017-07-17 11:22