MUI实现滑动一定距离再显示内容的效果

缺乏、安全感 2024-04-17 15:44 64阅读 0赞

## 引言 ##

滑动一定距离后再显示在开发过程中也是挺常见的，比如在一个上拉加载的列表中，当我们滑动到底部显示更多数据时，在底部可以显示一个按钮，当我们点击按钮时可以快速自动回到顶部的功能，当然啦，不单单只有这一个使用场景，其他的功能就要结合业务来实现了。

**实现的效果**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70][]

**源码**

<!doctype html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>滑动后显示</title>
    		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    		<link href="css/mui.css" rel="stylesheet" />
    		<script src="js/mui.js"></script>
    		<script type="text/javascript">
    			mui.init()
    		</script>
    		<style type="text/css">
    			.bottom-nav{
    				position: fixed;
    				bottom: 10px;
    				right: 10px;
    				width: 10%;
    				height: 10%;
    				background: #FFFFFF;
    				display: none;
    			}
    			.main{
    				height: 1000px;
    			}
    		</style>
    	</head>
    
    	<body>
    		<header class="mui-bar mui-bar-nav">
    			<h1 class="mui-title">滑动后显示</h1>
    		</header>
    		<div class="mui-content">
    			<div class="main">
    				
    			</div>
    			<div class="bottom-nav">
    				
    			</div>
    		</div>
    		<script type="text/javascript">
    			// 监听上下滑动事件
    			window.onscroll=function(){
    				// 滑动100px后显示内容
    				if(window.scrollY > 100){
    					document.querySelector('.bottom-nav').style.display='block';
    				}else{
    					document.querySelector('.bottom-nav').style.display='none';
    				}
    			}
    		</script>
    	</body>
    
    </html>

GitHub：

> [https://github.com/lwqbrell/mui\_scroll\_view][https_github.com_lwqbrell_mui_scroll_view]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/aa3a348128b7485498e24467107ea556.png
[https_github.com_lwqbrell_mui_scroll_view]: https://github.com/lwqbrell/mui_scroll_view