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

最新推荐文章于 2023-02-13 14:56:28 发布

树洞菇凉

最新推荐文章于 2023-02-13 14:56:28 发布

阅读量1.6k

点赞数

分类专栏： swiper 文章标签：前端

本文链接：https://blog.csdn.net/qq_37916164/article/details/109536033

版权

swiper 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图如下：
在这里插入图片描述

示例代码如下：

<!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>

树洞菇凉

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
移动端使用Swiper实现左右滑动切换内容

示例代码如下：<!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>
复制链接

扫一扫