持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第11天，点击查看活动详情
商品详情完成后还差底部的商品导航，我们不需要自己写，有现成的扩展组件：uni-goods-nav 商品导航，在页面可以点击下载&安装
点击绿色按钮使用HBuilderX导入插件，在HBuilderX中选中我们的项目，导入成功后，我们在 goods_detail.vue 中直接使用即可，我们可以先把官网的基本用法的代码粘过来，看看效果：
<template>
<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
</template>
<script>
export default {
data () {
return {
options: [{
icon: 'headphones',
text: '客服'
}, {
icon: 'shop',
text: '店铺',
info: 2,
infoBackgroundColor:'#007aff',
infoColor:"red"
}, {
icon: 'cart',
text: '购物车',
info: 2
}],
buttonGroup: [{
text: '加入购物车',
backgroundColor: '#ff0000',
color: '#fff'
},
{
text: '立即购买',
backgroundColor: '#ffa200',
color: '#fff'
}
]
}
},
methods: {
onClick (e) {
uni.showToast({
title: `点击${e.content.text}`,
icon: 'none'
})
},
buttonClick (e) {
console.log(e)
this.options[2].info++
}
}
}
</script>
我们运行来看看效果，点击进入商品详情页，发现只有把商品介绍拉到底部商品导航才能展示出来：
我们修改代码，将组件用view包裹，同时改变层级：
<view class="goods_nav">
<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
</view>
修改样式：
.goods_nav{
position: fixed;
bottom: 0;
width: 100%;
}
运行程序，查看结果：
现在样式正常了，但是拉到底部好像把详情遮挡了一些，所以我们修改 box3 的样式，增加一个 padding-bottom 即可
我们对其中的参数进行介绍：
首先看data中的options，对应左侧的客服、店铺、购物车这三个图标按钮，可以修改图片和文字以及角标。buttonGroup对应着右侧的加入购物车和立即购买这两个按钮
然后我们来看方法onClick，是左侧三个按钮点击时所触发的事件，它们三个共用这个事件怎么区分呢？我们可以来打印下其中的参数 e
onClick (e) {
console.log(e)
}
分别点击客服、店铺、购物车，打印内容如下：
所以，我们可以根据 index 来区分点击的是左侧的哪个按钮
而 buttonClick 则是右侧按钮的点击事件。可以用同样的方法进行区分
