【 Effect 】
【 Implementation method 】
<template> <div id="app"> <div class="main"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to /> <img Alt ="Vue logo" SRC ="./assets/logo.png"> </div> <div class="footer"> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld } } </script> <style> :root{ --footer-height: 50px; } body { padding: 0; margin: 0; } #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } .main{ padding-bottom: var(--footer-height); overflow-y: auto; } .footer{ position: fixed; bottom: 0; width: 100%; line-height: var(--footer-height); background: #42b983; color: #fff; } </style>Copy the code[Add requirements] Add A logic A, when A logic is satisfied, the bottom button is not displayed, other cases are displayed.
Add a Bool (isShow) to determine whether the bottom button is displayed.
<template> <div id="app"> <div class="main"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> <img alt="Vue logo" src="./assets/logo.png"> </div> <div class="footer" v-if='isShow'> <div Class ="footer-content"> This is fixed at the bottom of the button </div> </div> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld }, data() { return { isShow: true } }, } </script> <style> :root{ --footer-height: 50px; } body { padding: 0; margin: 0; } #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } .main { overflow-y: auto; } .footer { height: var(--footer-height); } .footer-content { position: fixed; bottom: 0; width: 100%; line-height: var(--footer-height); background: #42b983; color: #fff; } </style>Copy the code