html + vant 布局
<van-sticky>
<van-nav-bar title="详情" left-text="返回" left-arrow>
<template #right>
<van-icon name="wap-nav" size="18" @click="moreShow = !moreShow" />
</template>
</van-nav-bar>
<div v-if="moreShow" class="moreBox">
<van-grid :column-num="4">
<van-grid-item v-for="(value, i) in moreList" :key="i" :icon="value.icon" :text="value.tag" />
</van-grid>
</div>
</van-sticky>
数据
data() {
return {
moreShow: false,
moreList: [
{ tag: "vip", icon: 'vip-card-o', },
{ tag: "喜欢", icon: 'like-o', },
{ tag: "收藏", icon: 'star-o', },
{ tag: "爆款", icon: 'fire-o', },
{ tag: "新款", icon: 'new-o', },
{ tag: "购物车", icon: 'shopping-cart-o', },
{ tag: "客服中心", icon: 'service-o', },
{ tag: "设置", icon: 'setting-o', },
],
}
},
css样式
<style>
.van-cell__title {
color: #1989fa;
}
i.van-badge__wrapper.van-icon.van-icon-arrow-left.van-cell__left-icon {
color: #1989fa;
}
.moreBox {
position: absolute;
z-index: 2;
left: 0;
right: 0;
}
</style>
效果
展开效果
展开不挡住下面文章写法
<van-sticky>
<van-nav-bar title="详情" left-text="返回" left-arrow>
<template #right>
<van-icon name="wap-nav" size="18" @click="moreShow = !moreShow" />
</template>
</van-nav-bar>
</van-sticky>
<div v-if="moreShow">
<van-grid :column-num="4">
<van-grid-item v-for="(value, i) in moreList" :key="i" :icon="value.icon" :text="value.tag" />
</van-grid>
</div>
粘性布局只包含导航栏,不包含展开内容,展开内容样式.moreBox去掉