静玄
静玄
  • 发布:2016-11-04 15:56
  • 更新:2016-11-08 09:12
  • 阅读:1432

9宫格不滑动

分类:MUI

9宫格,我复制了9宫格的代码(左右滑动的),不知道那里需要改动,它现在不滑动,能帮我看看吗?
我基础不好,教程看不太明白,希望知道的人告诉我一下,非常感谢。

<div class="mui-content padding-top-10">  
            <ul class="mui-table-view">  
                <li class="mui-table-view-cell">  
                    循环  
                    <div id="Gallery_Toggle" class="mui-switch mui-active" data-switch="2">  
                        <div class="mui-switch-handle"></div>  
                    </div>  
                </li>  
            </ul>  
            <div id="Gallery" class="mui-slider" style="margin-top:15px;" data-slider="1">  
                <div class="mui-slider-group" style="transform: translate3d(0px, 0px, 0px) translateZ(0px); transition-duration: 0ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);">  
                    <div class="mui-slider-item mui-active">  
                        <ul class="mui-table-view mui-grid-view mui-grid-9">  
                            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">  
                                <a href="#">  
                                    <span class="mui-icon mui-icon-home"></span>  
                                    <div class="mui-media-body">home</div>  
                                </a>  
                            </li>  
                            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">  
                                <a href="#">  
                                    <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>  
                                    <div class="mui-media-body">email</div>  
                                </a>  
                            </li>  
                            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">  
                                <a href="#">  
                                    <span class="mui-icon mui-icon-chatbubble"></span>  
                                    <div class="mui-media-body">Chat</div>  
                                </a>  
                            </li>  
                            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">  
                                <a href="#">  
                                    <span class="mui-icon mui-icon-location"></span>  
                                    <div class="mui-media-body">location</div>  
                                </a>  
                            </li>  
                            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">  
                                <a href="#">  
                                    <span class="mui-icon mui-icon-search"></span>  
                                    <div class="mui-media-body">Search</div>  
                                </a>  
                            </li>  
                            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">  
                                <a href="#">  
                                    <span class="mui-icon mui-icon-phone"></span>  
                                    <div class="mui-media-body">Phone</div>  
                                </a>  
                            </li>  
                            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">  
                                <a href="#">  
                                    <span class="mui-icon mui-icon-gear"></span>  
                                    <div class="mui-media-body">Setting</div>  
                                </a>  
                            </li>  
                            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">  
                                <a href="#">  
                                    <span class="mui-icon mui-icon-info"></span>  
                                    <div class="mui-media-body">about</div>  
                                </a>  
                            </li>  
                            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">  
                                <a href="#">  
                                    <span class="mui-icon mui-icon-more"></span>  
                                    <div class="mui-media-body">more</div>  
                                </a>  
                            </li>  
                        </ul>  
                    </div>  
                    <div class="mui-slider-item">  
                        <ul class="mui-table-view mui-grid-view mui-grid-9">  
                            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">  
                                <a href="#">  
                                    <span class="mui-icon mui-icon-home"></span>  
                                    <div class="mui-media-body">home</div>  
                                </a>  
                            </li>  
                            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">  
                                <a href="#">  
                                    <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>  
                                    <div class="mui-media-body">email</div>  
                                </a>  
                            </li>  
                            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">  
                                <a href="#">  
                                    <span class="mui-icon mui-icon-chatbubble"></span>  
                                    <div class="mui-media-body">chat</div>  
                                </a>  
                            </li>  
                            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">  
                                <a href="#">  
                                    <span class="mui-icon mui-icon-location"></span>  
                                    <div class="mui-media-body">location</div>  
                                </a>  
                            </li>  
                            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">  
                                <a href="#">  
                                    <span class="mui-icon mui-icon-search"></span>  
                                    <div class="mui-media-body">Search</div>  
                                </a>  
                            </li>  
                            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">  
                                <a href="#">  
                                    <span class="mui-icon mui-icon-phone"></span>  
                                    <div class="mui-media-body">Phone</div>  
                                </a>  
                            </li>  
                            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">  
                                <a href="#">  
                                    <span class="mui-icon mui-icon-gear"></span>  
                                    <div class="mui-media-body">Setting</div>  
                                </a>  
                            </li>  
                            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">  
                                <a href="#">  
                                    <span class="mui-icon mui-icon-info"></span>  
                                    <div class="mui-media-body">about</div>  
                                </a>  
                            </li>  
                            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">  
                                <a href="#">  
                                    <span class="mui-icon mui-icon-more"></span>  
                                    <div class="mui-media-body">more</div>  
                                </a>  
                            </li>  
                        </ul>  
                    </div>  
                    <div class="mui-slider-item">  
                        <ul class="mui-table-view mui-grid-view mui-grid-9">  
                            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">  
                                <a href="#">  
                                    <span class="mui-icon mui-icon-home"></span>  
                                    <div class="mui-media-body">Home</div>  
                                </a>  
                            </li>  
                            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">  
                                <a href="#">  
                                    <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>  
                                    <div class="mui-media-body">Email</div>  
                                </a>  
                            </li>  
                            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">  
                                <a href="#">  
                                    <span class="mui-icon mui-icon-chatbubble"></span>  
                                    <div class="mui-media-body">Chat</div>  
                                </a>  
                            </li>  
                            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">  
                                <a href="#">  
                                    <span class="mui-icon mui-icon-location"></span>  
                                    <div class="mui-media-body">location</div>  
                                </a>  
                            </li>  
                            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">  
                                <a href="#">  
                                    <span class="mui-icon mui-icon-search"></span>  
                                    <div class="mui-media-body">Search</div>  
                                </a>  
                            </li>  
                            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">  
                                <a href="#">  
                                    <span class="mui-icon mui-icon-phone"></span>  
                                    <div class="mui-media-body">Phone</div>  
                                </a>  
                            </li>  
                            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">  
                                <a href="#">  
                                    <span class="mui-icon mui-icon-gear"></span>  
                                    <div class="mui-media-body">Setting</div>  
                                </a>  
                            </li>  
                            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">  
                                <a href="#">  
                                    <span class="mui-icon mui-icon-info"></span>  
                                    <div class="mui-media-body">about</div>  
                                </a>  
                            </li>  
                            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">  
                                <a href="#">  
                                    <span class="mui-icon mui-icon-more"></span>  
                                    <div class="mui-media-body">more</div>  
                                </a>  
                            </li>  
                        </ul>  
                    </div>  

                </div>  
                <div class="mui-slider-indicator">  
                    <div class="mui-indicator mui-active"></div>  
                    <div class="mui-indicator"></div>  
                    <div class="mui-indicator"></div>  
                </div>  
            </div>  
</div>  

<script>  
        mui.init();  
        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();  

            function toggleLoop(loop) {  
                    if (loop) {  
                        group.classList.add('mui-slider-loop');  
                        group.insertBefore(last, group.firstChild);  
                        group.appendChild(first);  
                        sliderApi.refresh();  
                        sliderApi.gotoItem(0);  
                    } else {  
                        group.classList.remove('mui-slider-loop');  
                        group.removeChild(first);  
                        group.removeChild(last);  
                        sliderApi.refresh();  
                        sliderApi.gotoItem(0);  
                    }  
                }  
                //按下“循环”按钮的处理逻辑;  
            document.getElementById('Gallery_Toggle').addEventListener('toggle', function(e) {  
                var loop = e.detail.isActive;  
                toggleLoop(loop);  
            });  
        });  
    </script>   
2016-11-04 15:56 负责人:无 分享
已邀请:
静玄

静玄 (作者)

已经解决了,原因是html没有复制对。

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