移动端使用Swiper实现左右滑动切换内容

青旅半醒 2022-12-19 09:26 420阅读 0赞

**效果图如下：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70_pic_center]

**示例代码如下：**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no">
    		<title>内容左右滑动切换</title>
    		<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    		<style>
    			*{ 
    				touch-action: pan-y;
    			}
    			body { 
    				margin: 0 auto;
    			}
    
    			.digTopic { 
    				padding: 10px;
    				margin: 10px 15px;
    				background: rgb(255, 255, 255);
    				box-shadow: rgb(237, 238, 242) 0px 2px 10px 0px;
    				border-radius: 5px;
    				position: relative;
    				width: auto;
    			}
    
    			.digTopicTitle { 
    				display: flex;
    				align-items: center;
    				margin-bottom: 9px;
    			}
    
    			.digTopicTitle img { 
    				width: 16px;
    				height: 16px;
    				margin-right: 5px;
    			}
    			
    			.digTopicTitle p { 
    				margin: 0 auto;
    				padding: 0;
    				text-align: left;
    			    width: -webkit-fill-available; // webkit内核浏览器需添加-webkit-前缀 fill-available:撑满可用空间
    			}
    			
    			.digTopicText { 
    				color: rgb(51, 51, 51);
    				font-size: 14px;
    				line-height: 20px;
    				font-weight: 400;
    				margin-bottom: 10px;
    			}
    
    			.digIntroduc { 
    				margin-bottom: 10px;
    				text-align: left;
    				white-space: normal;
    				/* 限制两行 溢出隐藏 */
    				display: -webkit-box;
    				-webkit-box-orient: vertical;
    				-webkit-line-clamp: 2;
    				overflow: hidden;
    			}
    
    			.digParticipat { 
    				display: flex;
    				align-items: center;
    			}
    
    			.digParticipat img { 
    				width: 9px;
    				height: 10px;
    				margin-right: 5px;
    			}
    
    			.digParticipat span { 
    				font-size: 12px;
    				color: rgb(96, 96, 96);
    			}
    
    			.digTopicIsNo { 
    				display: flex;
    				justify-content: center;
    				align-items: center;
    				position: relative;
    				margin-bottom: 15px;
    			}
    
    			.digTopicIsNo .digBtnText { 
    				display: flex;
    				justify-content: center;
    				align-items: center;
    				position: absolute;
    				top: -2px;
    				left: 0px;
    				width: 100%;
    			}
    
    			.digTopicIs,
    			.digTopicNo { 
    				opacity: 1;
    				width: 100px;
    				height: 42px;
    				text-align: center;
    				color: rgb(255, 255, 255);
    				font-size: 16px;
    				font-weight: bold;
    				display: flex;
    				justify-content: center;
    				align-items: center;
    			}
    
    			.digTopicBtn { 
    				opacity: 0;
    				width: 26px;
    				height: 15px;
    			}
    
    			.swiper-container { 
    				width: 100%;
    				height: 100%;
    			}
    
    			.swiper-slide { 
    				text-align: center;
    				font-size: 18px;
    				background: #fff;
    
    				display: -webkit-box;
    				display: -ms-flexbox;
    				display: -webkit-flex;
    				display: flex;
    				-webkit-box-pack: center;
    				-ms-flex-pack: center;
    				-webkit-justify-content: center;
    				justify-content: center;
    				-webkit-box-align: center;
    				-ms-flex-align: center;
    				-webkit-align-items: center;
    				align-items: center;
    			}
    
    			.swiper-pagination-bullet { 
    				text-align: center;
    				line-height: 20px;
    				font-size: 12px;
    				opacity: 1;
    				background: rgba(0, 0, 0, 0.2);
    				width: 15px;
    				height: 3px;
    				display: inline-block;
    				margin: 0 4px;
    				border-radius: 0;
    			}
    
    			.swiper-pagination-bullet-active { 
    				background: #007aff;
    			}
    
    			.swiper-container { 
    				height: auto;
    			}
    
    			.swiper-wrapper { 
    				height: auto;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="swiper-container">
    			<div class="swiper-wrapper">
    				<div class="swiper-slide">
    					<div class="digTopic slider-item">
    						<div class="digTopicTitle">
    							<img src="./img/topic.png">
    							<p>话题</p>
    						</div>
    						<div class="digTopicText">
    							<p class="digIntroduc">手续费收益创历史新高；手续费收益创历史新高；手续费收益创历史新高；手续费收益创历史新高；手续费收益创历史新高；</p>
    							<p class="digParticipat">
    								<img src="./img/participate.png">
    								<span>4378人已参与</span>
    							</p>
    						</div>
    						<div class="digTopicIsNo">
    							<img src="./img/is.png" style="width: 100px; height: 42px;">
    							<img src="./img/vs.png" style="width: 26px; height: 15px;">
    							<img src="./img/no.png" style="width: 100px; height: 42px;">
    							<div class="digBtnText">
    								<div class="digTopicIs">是</div>
    								<button class="digTopicBtn"></button>
    								<div class="digTopicNo">否</div>
    							</div>
    						</div>
    					</div>
    				</div>
    				<div class="swiper-slide">
    					<div class="digTopic slider-item">
    						<div class="digTopicTitle">
    							<img src="./img/topic.png">
    							<p>话题</p>
    						</div>
    						<div class="digTopicText">
    							<p class="digIntroduc">手续费收益创历史新高；手续费收益创历史新高；手续费收益创历史新高；</p>
    							<p class="digParticipat">
    								<img src="./img/participate.png">
    								<span>4378人已参与</span>
    							</p>
    						</div>
    						<div class="digTopicIsNo">
    							<img src="./img/is.png" style="width: 100px; height: 42px;">
    							<img src="./img/vs.png" style="width: 26px; height: 15px;">
    							<img src="./img/no.png" style="width: 100px; height: 42px;">
    							<div class="digBtnText">
    								<div class="digTopicIs">是</div>
    								<button class="digTopicBtn"></button>
    								<div class="digTopicNo">否</div>
    							</div>
    						</div>
    					</div>
    				</div>
    			</div>
    
    			<div class="swiper-pagination" style="bottom: 15px;"></div>
    		</div>
    
    
    		<script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
    		<script>
    			var swiper = new Swiper('.swiper-container', { 
    				pagination: { 
    					el: '.swiper-pagination',
    				},
    			});
    		</script>
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/4f224f92d45b454785653d82adc36959.png