uni-app x开发商城系统，扩展组件uni-ui实现底部商品导航
一、概述
上一篇文章，已经实现了商品详情轮播图，样式结构，数据渲染
接下来实现，底部商品导航，效果如下：
二、uni-goods-nav商品导航
官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-goods-nav.html
点击下载安装
跳转至链接：https://ext.dcloud.net.cn/plugin?name=uni-goods-nav
查看更新记录，右边就是插件效果
点击右边的，下载插件并导入HBuilderX
HBuilderX编辑器，这里会有日志提示
[uni_modules] 14:21:39.466 [my-first-unix][uni-goods-nav@1.2.1] 开始下载 [uni_modules] 14:21:39.640 [my-first-unix][uni-goods-nav@1.2.1] 已下载到临时目录 [uni_modules] 14:21:39.863 [my-first-unix][uni-goods-nav@1.2.1][uni-scss@1.0.3] 开始下载 [uni_modules] 14:21:39.981 [my-first-unix][uni-goods-nav@1.2.1][uni-scss@1.0.3] 已下载到临时目录 [uni_modules] 14:21:39.981 [my-first-unix][uni-goods-nav@1.2.1][uni-icons@2.0.12] 开始下载 [uni_modules] 14:21:40.121 [my-first-unix][uni-goods-nav@1.2.1][uni-icons@2.0.12] 已下载到临时目录 [uni_modules] 14:21:40.359 [my-first-unix][uni-goods-nav@1.2.1] 导入[my-first-unix/uni_modules]成功
进入项目根目录，找到uni_modules文件夹，这个就是下载好的插件。
三、展示商品导航
打开官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-goods-nav.html
这里有具体提示，指导你怎么使用
将这3段代码，复制到文件 pages/googs/goods-detail.uvue
完整代码如下：
<template>
<view>
<view class="goods_detail">
<!-- 轮播区域 -->
<view style="text-align: center;margin: 98px auto;color: red;" v-if="swipers.length==0">
该商品暂未设置轮播图数据
</view>
<up-swiper v-if="swipers.length>0" :list="swipers" keyName="src" indicator indicatorMode="dot" circular
:height="uni.upx2px(700)"></up-swiper>
<!-- 商品详情 -->
<view class="box1">
<view class="price">
<text>￥{{goodsData.sell_price}}</text>
<text>￥{{goodsData.market_price}}</text>
</view>
<view class="goods_name">{{goodsData.title}}</view>
</view>
<view class="line"></view>
<view class="box2">
<view>货号：{{goodsData.goods_no}}</view>
<view>库存：{{goodsData.stock_quantity}}</view>
</view>
<view class="line"></view>
<view class="box3">
<view class="tit">详情介绍</view>
<view class="content" v-if="content!='undefined'">
<!-- 支持富文本 -->
<rich-text :nodes="content"></rich-text>
</view>
<view style="text-align: center;color: red;" v-if="content.length==0">
该商品暂无详情介绍数据
</view>
</view>
</view>
<!-- 扩展组件 购物 -->
<view class="uni-container">
<!-- <uni-card is-full>
<text class="uni-h6"> uni-goods-nav 组件主要用于电商类应用底部导航，可自定义加入购物车，购买等操作</text>
</uni-card> -->
<!-- <uni-section title="基础用法" type="line">
<uni-goods-nav @click="onClick" />
</uni-section> -->
<!-- <uni-section title="自定义用法" type="line">
<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup" @click="onClick"
@buttonClick="buttonClick" />
<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup1" @click="onClick"
@buttonClick="buttonClick" style="margin-top: 20px;" />
</uni-section> -->
<view class="goods-carts">
<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
@buttonClick="buttonClick" />
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
//接收的id
id: 0,
//轮播图数据
swipers: [],
//商品详细信息
goodsData: [],
//详情介绍
content: "",
options: [{
icon: 'chat',
text: '客服'
}, {
icon: 'shop',
text: '店铺',
info: 2,
infoBackgroundColor: '#007aff',
infoColor: "#f5f5f5"
}, {
icon: 'cart',
text: '购物车',
info: 2
}],
buttonGroup: [{
text: '加入购物车',
backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
color: '#fff'
},
{
text: '立即购买',
backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
color: '#fff'
}
],
customButtonGroup: [{
text: '加入购物车',
backgroundColor: 'linear-gradient(90deg, #1E83FF, #0053B8)',
color: '#fff'
},
{
text: '立即购买',
backgroundColor: 'linear-gradient(90deg, #60F3FF, #088FEB)',
color: '#fff'
}
],
customButtonGroup1: [{
text: '立即购买',
backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
color: '#fff'
}]
}
},
onLoad(value) {
if (value.id != undefined) {
this.id = value.id;
console.log("onload拿到商品id", this.id);
//轮播图数据回显
this.getSwipers();
//商品详细信息
this.getDetailInfo();
//详情介绍数据
this.getContent();
}
},
methods: {
//获取轮播图数据
async getSwipers() {
const res = await this.$http.get('/api/getthumimages/' + this.id, {})
this.swipers = res.message;
console.log("详情页轮播图数据", this.swipers);
},
//获取商品详细信息
async getDetailInfo() {
const res = await this.$http.get('/api/goods/getinfo/' + this.id, {})
this.goodsData = res.message[0];
console.log("商品数据信息", this.goodsData);
},
//获取详情介绍
async getContent() {
const res = await this.$http.get('/api/goods/getdesc/' + this.id, {})
this.content = res.message[0].content;
console.log("详情介绍数据", this.content);
},
onClick(e) {
console.log(e)
uni.showToast({
title: `点击${e.content.text}`,
icon: 'none'
})
},
buttonClick(e) {
console.log(e)
this.options[2].info++
}
}
}
</script>
<style lang="scss">
.goods_detail {
swiper {
height: 700rpx;
image {
width: 100%;
height: 100%;
}
}
.box1 {
padding: 10px;
.price {
display: flex;
flex-direction: row; //横向排列
font-size: 35rpx;
color: $shop-color;
line-height: 80rpx;
// 原价样式
text:nth-child(2) {
color: #ccc;
font-size: 28rpx;
margin-top: 5rpx;
margin-left: 17rpx;
text-decoration-line: line-through;
}
}
.goods_name {
font-size: 32rpx;
line-height: 60rpx;
}
}
.box2 {
padding: 0 10px;
font-size: 32rpx;
line-height: 70rpx;
}
.box3 {
padding-bottom: 50px;
.tit {
font-size: 32rpx;
padding-left: 10px;
border-bottom: 1px solid #eee;
line-height: 70rpx;
}
.content {
padding: 10px;
font-size: 28rpx;
color: #333;
line-height: 50rpx;
img {
width: 750rpx;
}
}
}
}
.line {
height: 10rpx;
width: 750rpx;
background: #eee;
}
.example-body {
padding: 0;
/* #ifndef APP-NVUE */
display: block;
/* #endif */
}
.goods-carts {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
position: fixed;
left: 0;
right: 0;
/* #ifdef H5 */
left: var(--window-left);
right: var(--window-right);
/* #endif */
bottom: 0;
}
</style>
注意：需要关闭项目，重新运行。
效果如下：
点击对应的图标，会有提示
那么如何判断，点击哪个按钮呢？
其实也简单，修改onClick方法，打印属性e
onClick(e) { console.log(e) uni.showToast({ title: `点击${e.content.text}`, icon: 'none' }) },
打开浏览器控制台，可以看到相关日志
这里有一个index属性，就可以判断是点击了哪个按钮。
浙公网安备 33010602011771号