使用position=fixed来让该组件固定到底部,由于他的position是fixed,这个view写到哪里都行。
固定好之后会出现一个问题:当页面滑到底部时,该悬浮组件会遮挡原有的内容
为了解决上述问题,我们在页面底部加一个view,设置它的高度为,底部组件的高度,这样滑到底部时,这个view就阻止我们要展示的内容继续向下,进而不会遮挡该内容。
下面是代码
/* 这是底部标签 */
.edit {
height: 8vh;
}
底部悬浮内容
.message {
position: fixed;
bottom: 0;
left: 0;
height: 8vh;
width: 100vh;
}