mui选择卡切换事件

最新推荐文章于 2022-04-11 01:31:22 发布

原创最新推荐文章于 2022-04-11 01:31:22 发布 · 1w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#mui选择卡 #mui #右滑无效 #选择卡切换 #tab切换

mui 专栏收录该内容

6 篇文章

订阅专栏

本文详细探讨了在使用mui框架进行应用开发时，如何正确处理选择卡切换事件，特别是针对右滑无效的问题进行了深入分析，并提供了有效的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

		<div class="mui-content">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a id="tab_football" class="mui-control-item mui-active" href="#tab_1">
							竞彩足球
						</a>
						<a id="tab_basketball" class="mui-control-item" href="#tab_2">
							竞彩篮球
						</a>
					</div>
				</div>
				<div class="mui-slider-group">
					<div id="tab_1" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="match-list">

									<!--<div class="time">周日 2018-03-18 共54场比赛</div>
								    <div class="match-detail">
								        <div class="match-type">
								            <span class="match-country">英超</span>
								            <span class="match-code">021</span>
								            <span>23:59截止</span>
								        </div>
								        <div class="match-info">
								            <div class="match-team">
								                <span>[主]曼联</span>VS
								                <span>[客]皇家马德里</span>
								            </div>
								            <div class="match-peilv">
								                <table>
								                    <tbody><tr>
								                        <td class="home_peilv">0</td>
								                        <td class="home">
								                            <span>主胜</span>
								                            <div class="num">1.98</div>
								                        </td>
								                        <td class="home">
								                            <span>平</span>
								                            <div class="num">1.38</div>
								                        </td>
								                        <td class="home">
								                            <span>客胜</span>
								                            <div class="num">1.68</div>
								                        </td>
								                        <td rowspan="2"  >展开全部</td>
								                    </tr>
								                    <tr>
								                        <td>-1</td>
								                        <td class="home">
								                            <span>主胜</span>
								                            <div class="num">1.25</div>
								                        </td>
								                        <td class="home">
								                            <span>平</span>
								                            <div class="num">1.87</div>
								                        </td>
								                        <td class="home">
								                            <span>客胜</span>
								                            <div class="num">1.87</div>
								                        </td>
								                    </tr>
								                </tbody></table>
								            </div>
								        </div>
								    </div>-->

								</div>
							</div>
						</div>
					</div>
					<div id="tab_2" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="match-list">
									<!--
									<div class="time">周日 2018-03-18 共54场比赛</div>
									<div class="match-detail">
										<div class="match-type">
											<span class="match-country">英超</span>
											<span class="match-code">021</span>
											<span>23:59截止</span>
										</div>
										<div class="match-info">
											<div class="match-team">
												<span>[主]曼联</span>VS
												<span>[客]皇家马德里</span>
											</div>
											<div class="match-peilv">
												<table>
													<tbody>
														<tr>
															<td class="home_peilv">0</td>
															<td class="home">
																<span>主胜</span>
																<div class="num">1.98</div>
															</td>
															<td class="home">
																<span>平</span>
																<div class="num">1.38</div>
															</td>
															<td class="home">
																<span>客胜</span>
																<div class="num">1.68</div>
															</td>
															<td rowspan="2" class="showAllPlay">展开全部</td>
														</tr>
														<tr>
															<td>-1</td>
															<td class="home">
																<span>主胜</span>
																<div class="num">1.25</div>
															</td>
															<td class="home">
																<span>平</span>
																<div class="num">1.87</div>
															</td>
															<td class="home">
																<span>客胜</span>
																<div class="num">1.87</div>
															</td>
														</tr>
													</tbody>
												</table>
											</div>
										</div>
									</div>
-->

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

	//选择卡 切换事件
				document.getElementById('slider').addEventListener('slide', function(e) {
					if (e.detail.slideNumber === 0) {
						//足球
					}else{
						//篮球
						
					}
				});