移动端H5+Mui实现滑动翻页

最新推荐文章于 2025-04-28 13:19:10 发布

。是我呀

最新推荐文章于 2025-04-28 13:19:10 发布

阅读量2.4k

点赞数 1

分类专栏：移动端H5 文章标签： html javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_43090336/article/details/121953565

版权

本文记录了如何在移动端H5页面中利用Mui的滑动组件实现上滑下滑翻页的效果。在应对既有横向又有纵向滑动需求的场景下，通过结合文章底部链接的demo和Mui，成功实现页面滑动到底部自动翻页的功能。

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

最近在做一个上滑下滑翻页的效果，由于页面内也有横向和纵向的滑动，使用文章底部链接的demo，并没有很好的实现这一效果，在此基础上借助mui的滑动实现了这一效果，特此记录一下，以备后用。

实现思路：
使用mui的滑动组件进行页面内的滑动，页面滑动到底部之后进行翻页操作
代码如下

<!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 href="css/mui.min.css" rel="stylesheet"/>
		<style type="text/css">
			html, body, .mui-content {
				height: 100%;
				width: 100%;
				font-size: 12px;
				color: #fff;
				-webkit-user-select:none;
			    user-select:none;
			    -webkit-touch-callout:none;
			    touch-callout:none;
			}
			
			ul,li {
				padding: 0;
				margin: 0;
				list-style: none;
				font-size: 5rem;
				margin-top: 6rem;
			}
			
			.page_box {
				width: 100%;
				height: 100%;
				position: relative;
				overflow: hidden;
			}
			
			.page {
				width: 100%;
				height: 100%;
				overflow: hidden;
				background-color: #13181C;
			}
			
			.page .scroll-content {
				padding: 4rem 2.33rem;
			}
			
			.page.hide {
				display: none;
			}
			
			.page.inTop {
				animation: ShowTop .8s ease-out both;
			}
			
			.page.outTop {
				animation: HideTop .8s ease-out both;
			}
			
			.page.inDown {
				animation: ShowDown .8s ease-out both;
			}
			
			.page.outDown {
				animation: HideDown .8s ease-out both;
			}
			
			@keyframes ShowTop {
				0% {transform: translateY(100%);}
				100% {transform: translateY(0);}
			}
			
			@keyframes HideTop {
				0% {transform: translateY(0);}
				100% {transform: translateY(-100%);}
			}
			
			@keyframes ShowDown {
				0% {transform: translateY(-100%);}
				100% {transform: translateY(0);}
			}
			
			@keyframes HideDown {
				0% {transform: translateY(0);}
				100% {transform: translateY(100%);}
			}
			
			
			.lateral-roll-content {
				padding: 2rem 2.

最低0.47元/天解锁文章