一万次远行
一万次远行
  • 发布:2016-12-07 20:58
  • 更新:2016-12-08 14:18
  • 阅读:2424

怎么监听pullrefresh_with_tab.html 滑动切换切换事件

分类:MUI
2016-12-07 20:58 负责人:无 分享
已邀请:
猫猫猫猫

猫猫猫猫 - 用户已离线

这样

    var deceleration = mui.os.ios ? 0.003 : 0.0009; //阻尼系数  

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

    mui('.mui-scroll-wrapper').scroll({  
        bounce: false,  
        indicators: true, //是否显示滚动条  
        deceleration: deceleration  
    });  
    document.querySelector('#slider').addEventListener('slide', function(event) {  
        var index = event.detail.slideNumber;  
        //判断当前地index个tab的数据是否加载过,没有就加载  
        ......  
    });  
    //加载第一个tab的数据  
    ......
  • 7***@qq.com

    谢谢,有用。在测上啦,下拉刷新数据了

    2016-12-08 14:27

猫猫猫猫

猫猫猫猫 - 用户已离线

对于这种懒得连内容都不写的问题,我就愿意来回答,无奈没明白问的是什么。

一万次远行

一万次远行 (作者)

<div id="segmented-board-body" class="mui-content un-order-content  segmented-board-body ">  

        <div id="slider" class="mui-slider  segmented-board">  

            <div class="un-order-list">  
                <ul>  
                    <li class="pressed">人气从高到低</li>  
                    <li>销量从高到低</li>  
                    <li>价格从高到低</li>  
                    <li>价格从低到高</li>  
                    <li>最新发布</li>  
                </ul>  
            </div>  

            <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted un-segmented-control">  
                <div class="mui-scroll">  
                    <a class="mui-control-item mui-active" href="#item1mobile">  
                        推荐  
                    </a>  
                    <a class="mui-control-item" catalogId="0" href="#item2mobile">  
                        家居用品  
                    </a>  
                      <div class="slide-dd"></div>  
                </div>  

            </div>  
            <!--正序-->  
            <button class="order up" onclick="showlist()">人气<i class="order-up"></i></button>  
            <!--倒序——>  
            <!--<button class="order up" onclick="showlist()">人气<i class="order-up"></i></button>-->  

            <!--商品区域-->  
            <div class="mui-slider-group" id="muiSliderGroup">  

                <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">  
                    <div id="scroll1" class="mui-scroll-wrapper">  
                        <div class="mui-scroll">  
                            <ul class="mui-table-view mui-grid-view un-table-view un-table-view">  
                                <li class="mui-table-view-cell mui-media mui-col-xs-6 un-table-view-cell">  
                                    <!--链接跳转商品详情-->  
                                    <a href="#">  
                                        <div class="un-label"><label class="baoyou">包邮</label></div>  
                                        <img class="mui-media-object" src="../images/9288695698596082_500.jpg">  
                                        <div class="mui-media-body">asdfasfdasfdasfdsfdsfdsafdsf</div>  
                                    </a>  
                                    <div class="mui-media-body un-medie-price"><span class="un-price">1000</span><button class="cart"></button></div>  
                                </li>  

                            </ul>  
                        </div>  
                    </div>  
                </div>  
                <div id="item2mobile" class="mui-slider-item mui-control-content">  
                    <div class="mui-scroll-wrapper">  
                        <div class="mui-scroll">  
                            <ul class="mui-table-view mui-grid-view un-table-view un-table-view">  
                                <li class="mui-table-view-cell mui-media mui-col-xs-6 un-table-view-cell">  
                                    <!--链接跳转商品详情-->  
                                    <a href="#">  
                                        <div class="un-label"><label class="baoyou">包邮</label></div>  
                                        <img class="mui-media-object" src="../images/9288695698596082_500.jpg">  
                                        <div class="mui-media-body">asdfasfdasfdasfdsfdsfdsafdsf</div>  
                                    </a>  
                                    <div class="mui-media-body un-medie-price"><span class="un-price">1000</span><button class="cart"></button></div>  
                                </li>  

                            </ul>  
                        </div>  
                    </div>  
                </div>  

                </div>  
            </div>  
        </div>  

    </div>  
</div>  

</div>
需要监听商品区域横向滑动切换商品的事件让我下面的div能划到对应的active 的a 标签下面

7***@qq.com

7***@qq.com

同求,这个页面点击切换好监听,但是手势滑动的时候怎么监听到呢?我想要的效果是手势滑动到一下栏目,这个栏目识别并自动加载数据。如果不好监听,怎么去掉手势左右滑动的功能

星陨

星陨 - 前端业余开发者

document.addEventListener('swipeleft',function(){
alert(11111111);
});
向左滑动监听起作用,向右滑动事件就监听不到了

一万次远行

一万次远行 (作者)

    document.querySelector('#slider').addEventListener('slide', function(event) {  
        var segmentControl=document.getElementById('sliderSegmentedControl').addEventListener('scrollend',function(){  

            var tranform='translate3D('+$('#sliderSegmentedControl .mui-active').position().left+'px'+',0,0)';  
            var width=$('#sliderSegmentedControl .mui-active').width()*0.7+'px';  
            $('.slide-dd').css({'transform':tranform,'width':width});  
            var ul=getCurrentUl();  
            if($.isEmptyObject(ul)){  
                listenCatelogChange();  
            }  
            document.getElementById('sliderSegmentedControl').removeEventListener('scrollend',function(){})  

        })  
    });  

盯着浏览器终于找到答案 分享下 监听 slider ‘slider’ 然后监听 sliderSegmentedControl 的scrllend

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