请选择 进入手机版 | 继续访问电脑版
帖子
帖子
用户
博客
课程
显示全部楼层
1
帖子
0
勋章
5
Y币

[云开发] 为什么底部导航栏不能沉底

[复制链接]
发表于 2021-12-7 16:08:57
<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <style>
          body.html{
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
          }

          #app {

            height: 100%;
            display: flex;
            flex-direction: column;

          }

          .main{

            flex: 1;

          }

          .footer{
            display: flex;
            flex-direction: row;
          }

      </style>
  </head>
  <body>
    <!-- 上中下三部分 -->

    <div id="app">
        <!-- 头部 -->
        <div class="header">
            <h1>首页</h1>
        </div>

        <!-- 中间 -->
        <div class="main">
        </div>

        <!-- 底部导航栏 -->
        <div class="footer">

            <div v-for="tab in tabs">
                <!-- 导入底部导航栏图标 -->
                <div class="tab-icon">

                </div>
                <!-- 遍历显示底部导航栏名字2 -->
                <p>{{tab.name}}</p>
            </div>

        </div>
    </div>
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="./script/vue.min.js"></script>
  <script type="text/javascript">

    var vm;

    apiready = function(){
        initVue();
    };

    function initVue(){

        vm = new Vue({

            el:'#app',
            data:{
                tabs:[
                    {
                        name:'微信',
                        icon:''
                    },
                    {
                        name:'通讯录',
                        icon:''
                    },
                    {
                        name:'发现',
                        icon:''
                    },
                    {
                        name:'',
                        icon:''
                    }
                ]

            }
        })

    }

  </script>
  </html>



1.jpg
380
帖子
4
勋章
6
Y币
截图看看

https://developer.yonyou.com/for ... page%3D1&page=1
这个导航可以了解一下
您需要登录后才可以回帖 登录

本版积分规则