33-实现导航的基本结构

在全局引入样式，在 APP.vue 里面引入

<script>
    export default {
        onLaunch: function() {
            console.log('App Launch')
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }
</script>
<style>
    /*每个页面公共css */
    @font-face {font-family: "iconfont";
      src: url('~@/static/font/iconfont.eot?t=1576844226174'); /* IE9 */
      src: url('~@/static/font/iconfont.eot?t=1576844226174#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAVMAAsAAAAAChwAAAT9AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDKAqHQIYhATYCJAMUCwwABCAFhG0HUBurCFGUTk6f7Edh3LaEI5xY7HYeoWNK7zwLfd/7ZDz8/37f9rny/h3XpE711SdNQq1REh4bhEQoLLJn8v/facvNLUze6duSsZbv+GnTlb7095Zi+lMOtlEU4UA4hIXh39Neujkz1HYC0ju3M1Ac9Uf+ce/0z/PA5qOyXP5orGFznpcFmGBAY2xsawEOyhL0FvEsLiQTuJ7AoFUtsVtbBxckq4BugXjNDYVkbRYlhBOavvMZW7ZjpmrpbfpEfFY/H/8MIktSM+h78XRTJys/2///CaSPuC0jpPm5cJtExh6iEM99PQ8l9NiehMFPZtIVRMNXEj+zb0beXPT/M1lbNI395ZEVieiAZpiR1+KFn1lRTOZnifXTnlARyZg1+Tgxt7EMYgmJIyQ+AMNyCeqKWeO9ZOlV6Y7jtTFeKQ8tRm5qIlYcXy1Oyh9fVuuJ2tZ0WWdWhKmbl3MZu/sBgAGj+GXDAAynUbHQsuY1Dsowei8GE4agxGp8LQRRQbg6AndIDcIVej0Mm8c2vQ46ZEObfY4iStdK1oEgH8wh0cirf1tGHWjmFZSXw4Zt2pNGH1AssUPk+XIpFCyZjCESvUgkNAQRBpB+/CBuCIaSjsmCTRSFWSIXVzWoOeKt6wNErxaK51q3r1fPWtfq7nL7SgSFApHfYIivvEiv0cyEvqZGntCM6OxoqkToIdUN3Gg6mJUAqBFGFjxEg0tgwvcDFDIAM9f+WFS4weC6ob6egYZ6rhYSgSJa29jWNzPQ0s81TiSSNXpHI5jwtbi6eBNqkGrdc99fbMfQL+iYTR2oapkiByLYs93k3fbd5NwOxF9mAwy7HK58wdfBl+66BEADufaQOdvl2CPZJU7RbEv0wAzQL7Oh+dqs2fBRb9OgvjwoANaSyP+OIkUtxdT2/+sOGgpaCg6mGwDnsoN8fi5XyfIDVG5suj4+Wyg4oRIcmX6AAKfWSfHOS/m4NOO8XH5k+R2VQ1y+jbobtzlAYyAzQskq82saBgPMgBl9GDMAjnmOlY4Uj5SOuQGIffIeFR6dJps6HYW4RPbdpn6ypgHJMwmlMmTWBPBKrUlpRVBZrqfp21Wmy+v6P7OwsZ4Iob4vJnZfUlJTK/V9U/VkftSxuvWZbpn658+yjBSnJdacFWDXa2k6qDLvZgWQk8gTocUryiH3Y+6vPMc8KiXuu13obDbdSKNYV79vro61UN9/WHR+JpWlwfQNDrDNB6SVgC5daU02/IT7CSz3kQX4CPo9+Sub/UPsukQZ4Uhctmlu59ts8OXe2ML/Bhfwvfljk8rjW9m+pB/phmgqUQjyp/jKwVrLWy3UnASibDH6qsslHUkYxCB9AIFJP/kYZpZvIjQzJiQ9K5A1a2gh96Aacgad5ioM2rU9ecgUKSHKAHY8EAjjHiEZ9RWycRFayG+oZv1CZzwSMOgyGnMO2QieX5egIOhUnVCuCY8JdsxrxWdghI4irXKVewUy4EHa7/ScyW3wQOYxIBgaA0RGmRQu3SKbgeMI6kthgYYdE9Gf63aZ35k6mnBJ3k0SUCCgo1QTFKcRPEyujvKu958BhpBDIUNKfiSvACnAa6f6Onox0G2NF6tkXRoHhgwDCDHeiZEEF7VFXcDBmED5/q0sQIM6zBQR35wuq8Tiajrl69xpLD0VysKcNVLkKFGj070xuc+9NIZyWPEKRig1moQj4YKXnvKJzUwIAAAA') format('woff2'),
      url('~@/static/font/iconfont.woff?t=1576844226174') format('woff'),
      url('~@/static/font/iconfont.ttf?t=1576844226174') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
      url('~@/static/font/iconfont.svg?t=1576844226174#iconfont') format('svg'); /* iOS 4.1- */
    }
    .iconfont {
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    .icon-shipin:before {
      content: "\f0024";
    }
    .icon-tupian:before {
      content: "\e650";
    }
    .icon-guanyuwomen:before {
      content: "\e608";
    }
    .icon-ziyuan:before {
      content: "\e60d";
    }
</style>

在index引入样式。调整格式：

<template>
    <view class='home'>
        <swiper indicator-dots circular>
            <swiper-item v-for='item in swipers' :key='item.id'>
                <image :src='item.img'></image>
            </swiper-item>
        </swiper>
        <!--导航-->
        <view class='nav'>
            <view class='nav_item'>
                <view class='iconfont icon-ziyuan'></view>
                <text>黑马超市</text>
            </view>
            <view class='nav_item'>
                <view class='iconfont icon-guanyuwomen'></view>
                <text>联系我们</text>
            </view>
            <view class='nav_item'>
                <view class='iconfont icon-tupian'></view>
                <text>社区图片</text>
            </view>
            <view class='nav_item'>
                <view class='iconfont icon-shipin'></view>
                <text>学习视频</text>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                swipers:[]
            }
        },
        onLoad() {    //监听页面加载    
            this.getSwiper()
        },
        methods: {
            //获取轮播的数据
            // async getSwiper(){
            //     console.log('获取轮播的数据')
            //     const res = await uni.request({
            //         url:'http://localhost:8082/api/getlunbo',
            //     })
            //     console.log(res.data)
            // }
            //获取轮播数据
            async getSwiper(){
                // console.log('获取轮播的数据')
                // uni.request({
                //     url:'http://localhost:8082/api/getlunbo',
                //     success:res=>{
                //         console.log(res.data.message)
                //         if(res.data.status !== 0){
                //             return uni.showToast({
                //                 title:'获取数据失败'
                //             })
                //         }
                //         this.swipers = res.data.message
                //     }
                // })
                const res =await this.$myRequest({
                    url:'/api/getlunbo'
                })
                this.swipers = res.data.message
            }
        }
    }
</script>
<style lang="scss">
.home{
    swiper{
        width:750rpx;
        height: 380rpx;
        image{
            height:100%;
            width:100%;
        }
    }
    .nav{
        display: flex;
        .nav_item{
            width:25%;
            text-align: center;
            view{
                width: 120rpx;
                height:120rpx;
                background-color: #b50e03;
                border-radius: 60rpx;
                margin: 10px auto;
                line-height: 120rpx;
                color:#fff;
                font-size:50rpx;
            }
            .icon-tupian{
                font-size:45rpx;
            }
            text{
                font-size: 30rpx;
            }
        }
    }
}
</style>