vue uni-app实例代码

index.vue

<template>
    <view>
        <tophead></tophead>
        <topnav></topnav>
        <leftnav></leftnav>
    </view>
</template> 
<script>
    import tophead from '../../components/header.vue';
    import topnav from '../../components/nav.vue';
    import leftnav from '../../components/left-nav.vue';
    export default {
        components:{
            tophead,
            topnav,
            leftnav
        },
        data() {
            return {
                
            }
        },
        onLoad() {

        },
        methods: {

        }
    }
</script>

<style> 
    .uni-page-head{
        display: none;
    }
</style>

nav.vue

<template>
    <view class="nav">
        <view class="mynav">
            <view class="nav-l">
                宠物大全
            </view>
            <view class="nav-r">
                <navigator>{ {nav1}}</navigator>
                <navigator>{ {nav2}}</navigator>
                <navigator>{ {nav3}}</navigator>
                <navigator>{ {nav4}}</navigator>
                <navigator>{ {nav5}}</navigator>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                nav1:'首页',
                nav2:'宠物百科',
                nav3:'宠物问答',
                nav4:'宠物视频',
                nav5:'萌宠日常'
            };
        }
    }
</script>

<style> 
    .mynav{
        box-shadow: 0 1px 4px 0 rgba(0,0,0,.1);