效果:
滚动条滚动过程中,按钮的位置位于手机的底部
滚动条滚到底部时,按钮的位置正常
这个position:sticky真的好用,我原先的想法是利用滚动条滚动事件去控制,没想到css就可以解决
<template>
<view class="container">
<!-- 页面内容 -->
<!-- ... -->
<!-- 底部按钮 -->
<view class="footer-button">
<button @click="handleButtonClick">按钮</button>
</view>
</view>
</template>
<style>
.container {
position: relative;
height: 100vh; /* 设置容器高度为屏幕高度 */
overflow-y: scroll; /* 允许内容溢出并显示滚动条 */
}
.footer-button {
position: sticky;
bottom: 0; /* 将容器固定在底部 */
z-index: 9999; /* 设置 z-index 提高按钮的层级 */
padding: 10px; /* 设置适当的内边距 */
}
</style>