2***@qq.com
2***@qq.com
  • 发布:2018-07-13 10:05
  • 更新:2019-05-25 12:34
  • 阅读:1947

滑动选项卡里嵌套图片轮播,滑动图片,事件会穿透到后面选项卡,怎么办

分类:MUI

详细问题描述
[内容]
滑动选项卡里嵌套图片轮播,滑动图片,事件会穿透到后面选项卡
重现步骤
选项卡代码:
mui.plusReady(function() {
var _self = plus.webview.currentWebview();
var group = new webviewGroup(_self.id, {
items: [{
id: "tab-top-subpage-1.html",
url: "tab-top-subpage-1.html",
extras: {}
}, {
id: "tab-top-subpage-2.html",
url: "tab-top-subpage-2.html",
extras: {}
}, {
id: "tab-top-subpage-3.html",
url: "tab-top-subpage-3.html",
extras: {}
}, {
id: "tab-top-subpage-4.html",
url: "tab-top-subpage-4.html",
extras: {}
}, {
id: "tab-top-subpage-5.html",
url: "tab-top-subpage-5.html",
extras: {}
}],
onChange: function(obj) {
var c = document.querySelector(".mui-control-item.mui-active");
if(c) {
c.classList.remove("mui-active");
}
var target = document.querySelector(".mui-scroll .mui-control-item:nth-child(" + (parseInt(obj.index) + 1) + ")");
target.classList.add("mui-active");
if(target.scrollIntoView) {
target.scrollIntoView();
}
}
});
mui(".mui-scroll").on("tap", ".mui-control-item", function(e) {
var wid = this.getAttribute("data-wid");
group.switchTab(wid);
});

        });  

子页面大概代码:
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<div id="slider" class="mui-slider" >
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="../images/yuantiao.jpg">
</a>
</div>
<!-- 第一张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/shuijiao.jpg">
</a>
</div>
<!-- 第二张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/muwu.jpg">
</a>
</div>
<!-- 第三张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/cbd.jpg">
</a>
</div>
<!-- 第四张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/yuantiao.jpg">
</a>
</div>
<!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="../images/shuijiao.jpg">
</a>
</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 class="mui-indicator"></div>
</div>
</div>
<div class="title">
这是webview模式选项卡中的第1个子页面
</div>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">推荐-Item 1</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">推荐-Item 2</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">推荐-Item 3</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">推荐-Item 4</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">推荐-Item 5</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">推荐-Item 6</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">推荐-Item 7</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">推荐-Item 8</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">推荐-Item 9</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">推荐-Item 10</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">推荐-Item 11</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">推荐-Item 12</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">推荐-Item 13</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">推荐-Item 14</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">推荐-Item 15</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">推荐-Item 16</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">推荐-Item 17</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">推荐-Item 18</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">推荐-Item 19</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">推荐-Item 20</a>
</li>
</ul>
</div>
</div>
当类似今日头条的新闻那种布局,顶部是选项卡,详情列表是带轮番图的,轮番图有五张图片,本来想滑动轮番图从第一张到第二张,可直接选项卡滑动了。

2018-07-13 10:05 负责人:无 分享
已邀请:
1***@163.com

1***@163.com

兄得,解决了吗,遇到同样的问题了

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