- 发布:2016-12-07 20:58
- 更新:2016-12-08 14:18
- 阅读:2424
怎么监听pullrefresh_with_tab.html 滑动切换切换事件
猫猫猫猫 - 用户已离线
这样
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的数据
......
一万次远行 (作者)
<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 标签下面
星陨 - 前端业余开发者
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
7***@qq.com
谢谢,有用。在测上啦,下拉刷新数据了
2016-12-08 14:27