Uni-app跟学笔记（五）：uni-ui组件库的使用、项目打包（小程序、h5、APP）_uni-goods-nav

作者：我家小花儿 | 2024-04-18 09:11:13

踩

uni-goods-nav

文章目录

本博客为 uni-app 此门课的跟学笔记，目的是便于个人复习和对知识快速索引，源码素材可在均可在视频评论区找到

1）uni-ui组件库的使用

推荐在新建项目的时候把项目新建成uni-ui项目，这样uni-ui中的所有组件都会被打包到node_modules中，直接引用即可，就不需要在官网中去下载插件了

在这里插入图片描述

这里模拟做一个商品导航栏，在uni-ui中是uni-goods-nav组件

必要前提工作，从uni_modules中引入uni-goods-nav.vue模块，并且在components注册该组件

<script>
	// 导入，再注册，然后直接uni-goods-nav引用即可
	import uniGoodsNav from '../../uni_modules/uni-goods-nav/components/uni-goods-nav/uni-goods-nav.vue'
	export default {
		data() {
			return {
                // 注册该组件
               	components: {
					uniGoodsNav
				},
            }
        }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

uni-ui组件库例程链接：uni-app官网 (dcloud.net.cn)

在官方例程中找到对应的使用方法，添加必要的属性值和方法

在这里插入图片描述

完整代码

<template>
	<view class="goods_detail">
		<!-- 基于uni-ui库开发就是简单嗷 -->
		<view class="goods_nav">
			<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	// 导入，再注册，然后直接uni-goods-nav引用即可
	import uniGoodsNav from '../../uni_modules/uni-goods-nav/components/uni-goods-nav/uni-goods-nav.vue'
	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) {
				console.log(e); // 打印事件会发现,区分点击事物在于index
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
			},
			// 商品导航栏的(加入购物车/立即购买)
			buttonClick(e) {
				console.log(e) // 打印事件会发现,区分加入购物车和立即购买在于index
				this.options[2].info++
			}
		},
		components: {
			uniGoodsNav
		}
	}
</script>

<style lang="scss">

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68