1.开发一个hybrid,要求完全按照APP的形式来做。底部的导航这个好做,我做成根组件下的一个子组件就好了(因为这个导航样式什么的都是固定的,功能就是切换路由很简单),每个页面都能看得到。
2.那么问题来了,头部的导航我目前没任何思路啊,因为头部导航每个页面都不同并且功能事件都不同。
3.我想问的是 到底做成一个组件好 还是放到每个路由的每个页面单独的写头部比较好?如果做成一个组件,那么是如何传参来改变头部的样式或者事件呢,很急。希望大神给点思路。
<!--根组件-->
<template>
<div id="top">
<!--这是我现在做成的头部导航 不知道下一步怎么做了-->
<layout-header :header="headerway"></layout-header>
<!-- 路由外链 -->
<router-view transition="expand"></router-view>
<!--底部的导航-->
<layout-dock></layout-dock>
</div>
</template>
如图这种APP 每个人都知道 不同的页面头部是切换的
head 组件模板部分:
<header class="c-header-nav">
<div class="c-header-nav_action c-header-left">
<a href="javascript:;" class="" @click="leftAction()">
<img class="c-header-icon"
src="data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 20"><path d="M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z" fill="%23000"/></svg>"
alt="返回">
</a>
</div>
<div class="c-header-nav_title"><slot></slot></div>
<div class="c-header-nav_action c-header-right">
<a href="javascript:;" class="">
<slot name="right"></slot>
</a>
</div>
</header>
使用简单组件:
<c-header-nav>购物车</c-header-nav>
https://m.youcai.xin/cart/0
使用自定义组件:
<c-header-nav class="p-coupon-header-nav">
<div class="p-coupon-header-nav_title" @click="showDropdown()">
<label class="c-header-nav_title_text">(% title %)</label>
<i class="iconfont c-header-nav_icon" :class="{active: show_dropdown}" v-show="state!=2"></i>
<div class="c-dropdown" v-show='show_dropdown' transition="opacity">
<label v-for="dropdown in dropdown_list" @click.stop.prevent="selectDropdown($index)">(% dropdown %)</label>
</div>
</div>
<a href="javascript:;" slot="right" @click="show_redeem_view = true">兑换</a>
</c-header-nav>
https://m.youcai.xin/coupon/1