欧阳1
欧阳1
  • 发布:2016-11-16 16:32
  • 更新:2016-11-16 16:32
  • 阅读:5906

mui(slider).slider()关于这个滚动的一个问题

分类:MUI

mui.ready(function() {  
    var slider = document.getElementById('Gallery');  
    var group = slider.querySelector('.mui-slider-group');  
    var items = mui('.mui-slider-item', group);  
    //克隆第一个节点  
    var first = items[0].cloneNode(true);  
    first.classList.add('mui-slider-item-duplicate');  
    //克隆最后一个节点  
    var last = items[items.length - 1].cloneNode(true);  
    last.classList.add('mui-slider-item-duplicate');  
    //处理是否循环逻辑,若支持循环,需支持两点:  
    //1、在.mui-slider-group节点上增加.mui-slider-loop类  
    //2、重复增加2个循环节点,图片顺序变为:N、1、2...N、1  
    var sliderApi = mui(slider).slider();  
        group.classList.add('mui-slider-loop');  
    group.insertBefore(last, group.firstChild);  
    group.appendChild(first);  
    sliderApi.refresh();  
});  

上面的代码是把左右滚动,有没有方法可以判断是向左滚动还是向右滚动?
如果是向左滚动就切换到下一页,如果是向右滚动就切换到上一页

如果横向滚动时,滚动的层只有一个,也就是items.length=1,下面的js滚动监控方法就不执行, 不知道这是bug还是就这样的。如果滚动项是多个,也只能获取当前需要显示的项的下标值。


document.getElementById('slider').addEventListener('slide', function(e) {  
   var index=e.detail.slideNumber;  
  console.log(index);  
});  
2016-11-16 16:32 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复