鴻蒙OSUniApp 制作簡潔高效的標簽云組件#三方框架 #Uniapp

UniApp 制作簡潔高效的標簽云組件

在移動端應用中，標簽云（Tag Cloud）是一種常見的UI組件，它以視覺化的方式展示關鍵詞或分類，幫助用戶快速瀏覽和選擇感興趣的內容。本文將詳細講解如何在UniApp框架中實現一個簡潔高效的標簽云組件，并探討其實際應用場景。

前言

最近在做一個社區類App時，產品經理提出了一個需求：需要在首頁展示熱門話題標簽，并且要求這些標簽能夠根據熱度有不同的展示樣式。起初我想到的是直接用現成的組件庫，但翻遍了各大組件市場，卻沒找到一個既美觀又符合我們需求的標簽云組件。

無奈之下，只能自己動手來實現這個功能。經過幾天的摸索和優化，終于做出了一個既簡潔又實用的標簽云組件。今天就把這個過程分享給大家，希望能對你有所幫助。

需求分析

在開始編碼前，我們先來明確一下標簽云組件應具備的核心功能：

靈活的布局：標簽能夠自動換行，適應不同尺寸的屏幕
可定制的樣式：支持自定義顏色、大小、邊框等樣式
支持點擊事件：點擊標簽能觸發相應的操作
熱度展示：能夠根據標簽的權重/熱度展示不同的樣式
性能優化：即使有大量標簽，也不會影響應用性能

有了這些需求后，我們就可以開始設計并實現這個組件了。

基礎組件實現

首先，我們創建一個標簽云組件文件 tag-cloud.vue：

<template><view class="tag-cloud-container"><view v-for="(item, index) in tags" :key="index"class="tag-item":class="[`tag-level-${item.level || 0}`, item.active ? 'active' : '']":style="getTagStyle(item)"@tap="handleTagClick(item, index)"><text>{{ item.name }}</text><text v-if="showCount && item.count" class="tag-count">({{ item.count }})</text></view></view>
</template><script>
export default {name: 'TagCloud',props: {// 標簽數據tags: {type: Array,default: () => []},// 是否顯示標簽數量showCount: {type: Boolean,default: false},// 自定義顏色配置colorMap: {type: Array,default: () => ['#8a9aa9', '#61bfad', '#f8b551', '#ef6b73', '#e25c3d']},// 最大字體大小 (rpx)maxFontSize: {type: Number,default: 32},// 最小字體大小 (rpx)minFontSize: {type: Number,default: 24}},methods: {// 處理標簽點擊事件handleTagClick(item, index) {this.$emit('click', { item, index });},// 獲取標簽樣式getTagStyle(item) {const level = item.level || 0;const style = {};// 根據level確定字體大小if (this.maxFontSize !== this.minFontSize) {const fontStep = (this.maxFontSize - this.minFontSize) / 4;style.fontSize = `${this.minFontSize + level * fontStep}rpx`;}// 設置標簽顏色if (this.colorMap.length > 0) {const colorIndex = Math.min(level, this.colorMap.length - 1);style.color = this.colorMap[colorIndex];style.borderColor = this.colorMap[colorIndex];}return style;}}
}
</script><style lang="scss">
.tag-cloud-container {display: flex;flex-wrap: wrap;padding: 20rpx 10rpx;.tag-item {display: inline-flex;align-items: center;padding: 10rpx 20rpx;margin: 10rpx;border-radius: 30rpx;background-color: #f8f8f8;border: 1px solid #e0e0e0;font-size: 28rpx;color: #333333;transition: all 0.2s ease;&.active {color: #ffffff;background-color: #007aff;border-color: #007aff;}.tag-count {margin-left: 6rpx;font-size: 0.9em;opacity: 0.8;}}// 為不同級別的標簽設置默認樣式.tag-level-0 {opacity: 0.8;}.tag-level-1 {opacity: 0.85;}.tag-level-2 {opacity: 0.9;font-weight: 500;}.tag-level-3 {opacity: 0.95;font-weight: 500;}.tag-level-4 {opacity: 1;font-weight: 600;}
}
</style>

這個基礎組件實現了我們需要的核心功能：

標簽以流式布局展示，自動換行
根據傳入的level屬性設置不同級別的樣式
支持自定義顏色和字體大小
點擊事件封裝，可傳遞給父組件處理

標簽數據處理

標簽云組件的核心在于如何根據標簽的權重/熱度來設置不同的視覺效果。一般來說，我們會根據標簽出現的頻率或者其他自定義規則來計算權重。下面是一個簡單的處理函數：

/*** 處理標簽數據，計算每個標簽的級別* @param {Array} tags 原始標簽數據* @param {Number} levelCount 級別數量，默認為5* @return {Array} 處理后的標簽數據*/
function processTagData(tags, levelCount = 5) {if (!tags || tags.length === 0) return [];// 找出最大和最小count值let maxCount = 0;let minCount = Infinity;tags.forEach(tag => {if (tag.count > maxCount) maxCount = tag.count;if (tag.count < minCount) minCount = tag.count;});// 如果最大最小值相同，說明所有標簽權重一樣if (maxCount === minCount) {return tags.map(tag => ({...tag,level: 0}));}// 計算每個標簽的級別const countRange = maxCount - minCount;const levelStep = countRange / (levelCount - 1);return tags.map(tag => ({...tag,level: Math.min(Math.floor((tag.count - minCount) / levelStep),levelCount - 1)}));
}

這個函數會根據標簽的count屬性，將所有標簽分為0-4共5個級別，我們可以在使用組件前先對數據進行處理。

使用標簽云組件

接下來，讓我們看看如何在頁面中使用這個組件：

<template><view class="page-container"><view class="section-title">熱門話題</view><tag-cloud :tags="processedTags" :color-map="colorMap":show-count="true"@click="onTagClick"></tag-cloud></view>
</template><script>
import TagCloud from '@/components/tag-cloud.vue';export default {components: {TagCloud},data() {return {tags: [{ name: '前端開發', count: 120 },{ name: 'Vue', count: 232 },{ name: 'UniApp', count: 180 },{ name: '小程序', count: 156 },{ name: 'React', count: 98 },{ name: 'Flutter', count: 76 },{ name: 'JavaScript', count: 210 },{ name: 'CSS', count: 89 },{ name: 'TypeScript', count: 168 },{ name: '移動開發', count: 143 },{ name: '云開發', count: 58 },{ name: '性能優化', count: 112 }],colorMap: ['#8a9aa9', '#61bfad', '#f8b551', '#ef6b73', '#e25c3d']}},computed: {processedTags() {// 調用上面定義的處理函數return this.processTagData(this.tags);}},methods: {processTagData(tags, levelCount = 5) {// 這里是上面定義的標簽處理函數// ...函數內容同上...},onTagClick({ item, index }) {console.log(`點擊了標簽: ${item.name}, 索引: ${index}`);uni.showToast({title: `你選擇了: ${item.name}`,icon: 'none'});// 這里可以進行頁面跳轉或其他操作// uni.navigateTo({//   url: `/pages/topic/topic?name=${encodeURIComponent(item.name)}`// });}}
}
</script><style lang="scss">
.page-container {padding: 30rpx;.section-title {font-size: 34rpx;font-weight: bold;margin-bottom: 20rpx;color: #333;}
}
</style>

進階：隨機顏色與布局

標簽云還有一種常見的效果是隨機顏色和隨機大小。下面我們來實現這個功能：

// 在組件的methods中添加如下方法// 獲取隨機顏色
getRandomColor() {const colors = ['#61bfad', '#f8b551', '#ef6b73', '#8a9aa9', '#e25c3d', '#6cc0e5', '#fb6e50', '#f9cb8b'];return colors[Math.floor(Math.random() * colors.length)];
},// 修改getTagStyle方法
getTagStyle(item) {const style = {};if (this.random) {// 隨機模式style.fontSize = `${Math.floor(Math.random() * (this.maxFontSize - this.minFontSize) + this.minFontSize)}rpx`;style.color = this.getRandomColor();style.borderColor = style.color;} else {// 原有的level模式const level = item.level || 0;if (this.maxFontSize !== this.minFontSize) {const fontStep = (this.maxFontSize - this.minFontSize) / 4;style.fontSize = `${this.minFontSize + level * fontStep}rpx`;}if (this.colorMap.length > 0) {const colorIndex = Math.min(level, this.colorMap.length - 1);style.color = this.colorMap[colorIndex];style.borderColor = this.colorMap[colorIndex];}}return style;
}

然后在props中添加random屬性：

// 添加到props中
random: {type: Boolean,default: false
}

這樣，當設置 random 為 true 時，標簽就會以隨機顏色和大小展示，增加視覺的多樣性。

實現可選中的標簽云

在某些場景下，我們需要標簽支持選中功能，比如在篩選器中。我們可以對組件進行擴展：

<template><!-- 添加多選模式 --><view class="tag-cloud-container"><view v-for="(item, index) in internalTags" :key="index"class="tag-item":class="[`tag-level-${item.level || 0}`, item.selected ? 'selected' : '',selectable ? 'selectable' : '']":style="getTagStyle(item)"@tap="handleTagClick(item, index)"><text>{{ item.name }}</text><text v-if="showCount && item.count" class="tag-count">({{ item.count }})</text></view></view>
</template><script>
export default {// ... 現有代碼 ...props: {// ... 現有props ...// 是否支持選中selectable: {type: Boolean,default: false},// 最大可選數量，0表示不限制maxSelectCount: {type: Number,default: 0},// 選中的標簽值數組value: {type: Array,default: () => []}},data() {return {// 內部維護的標簽數據，添加selected狀態internalTags: []};},watch: {tags: {immediate: true,handler(newVal) {this.initInternalTags();}},value: {handler(newVal) {this.syncSelectedStatus();}}},methods: {// 初始化內部標簽數據initInternalTags() {this.internalTags = this.tags.map(tag => ({...tag,selected: this.value.includes(tag.name)}));},// 同步選中狀態syncSelectedStatus() {if (!this.selectable) return;this.internalTags.forEach(tag => {tag.selected = this.value.includes(tag.name);});},// 修改標簽點擊處理邏輯handleTagClick(item, index) {if (this.selectable) {// 處理選中邏輯const newSelected = !item.selected;// 檢查是否超出最大選擇數量if (newSelected && this.maxSelectCount > 0) {const currentSelectedCount = this.internalTags.filter(t => t.selected).length;if (currentSelectedCount >= this.maxSelectCount) {uni.showToast({title: `最多只能選擇${this.maxSelectCount}個標簽`,icon: 'none'});return;}}// 更新選中狀態this.$set(this.internalTags[index], 'selected', newSelected);// 構建新的選中值數組const selectedValues = this.internalTags.filter(tag => tag.selected).map(tag => tag.name);// 觸發input事件，支持v-modelthis.$emit('input', selectedValues);}// 觸發點擊事件this.$emit('click', { item: this.internalTags[index], index,selected: this.internalTags[index].selected});}}
}
</script><style lang="scss">
.tag-cloud-container {// ... 現有樣式 ....tag-item {// ... 現有樣式 ...&.selectable {cursor: pointer;user-select: none;&:hover {opacity: 0.8;}}&.selected {color: #ffffff;background-color: #007aff;border-color: #007aff;}}
}
</style>

這樣，我們的標簽云就支持了多選模式，并且可以通過v-model進行雙向綁定。

實戰案例：興趣標簽選擇器

最后，我們來看一個實際應用案例 - 用戶注冊時的興趣標簽選擇：

<template><view class="interest-selector"><view class="title">選擇你感興趣的話題</view><view class="subtitle">選擇3-5個你感興趣的話題，我們將為你推薦相關內容</view><tag-cloud:tags="interestTags":selectable="true":max-select-count="5"v-model="selectedInterests"@click="onInterestTagClick"></tag-cloud><view class="selected-count">已選擇 {{ selectedInterests.length }}/5 個話題</view><button class="confirm-btn" :disabled="selectedInterests.length < 3"@tap="confirmSelection">確認選擇</button></view>
</template><script>
import TagCloud from '@/components/tag-cloud.vue';export default {components: {TagCloud},data() {return {interestTags: [{ name: '科技', count: 1250 },{ name: '體育', count: 980 },{ name: '電影', count: 1560 },{ name: '音樂', count: 1320 },{ name: '美食', count: 1480 },{ name: '旅行', count: 1280 },{ name: '攝影', count: 860 },{ name: '游戲', count: 1420 },{ name: '時尚', count: 760 },{ name: '健身', count: 890 },{ name: '閱讀', count: 720 },{ name: '動漫', count: 830 },{ name: '寵物', count: 710 },{ name: '財經', count: 680 },{ name: '汽車', count: 590 },{ name: '育兒', count: 520 },{ name: '教育', count: 780 },{ name: '歷史', count: 650 }],selectedInterests: []}},created() {// 處理標簽數據，設置levelthis.interestTags = this.processTagData(this.interestTags);},methods: {processTagData(tags, levelCount = 5) {// ... 標簽處理函數，同上 ...},onInterestTagClick({ item, selected }) {console.log(`${selected ? '選中' : '取消選中'}標簽: ${item.name}`);},confirmSelection() {if (this.selectedInterests.length < 3) {uni.showToast({title: '請至少選擇3個感興趣的話題',icon: 'none'});return;}// 保存用戶選擇的興趣標簽uni.showLoading({title: '保存中...'});// 模擬API請求setTimeout(() => {uni.hideLoading();uni.showToast({title: '保存成功',icon: 'success'});// 跳轉到首頁setTimeout(() => {uni.reLaunch({url: '/pages/index/index'});}, 1500);}, 1000);}}
}
</script><style lang="scss">
.interest-selector {padding: 40rpx;.title {font-size: 40rpx;font-weight: bold;margin-bottom: 20rpx;}.subtitle {font-size: 28rpx;color: #666;margin-bottom: 50rpx;}.selected-count {text-align: center;margin: 30rpx 0;font-size: 28rpx;color: #666;}.confirm-btn {margin-top: 60rpx;background-color: #007aff;color: #fff;&[disabled] {background-color: #cccccc;color: #ffffff;}}
}
</style>

性能優化

當標簽數量很多時，可能會遇到性能問題。以下是幾個優化建議：

虛擬列表：對于特別多的標簽（如上百個），可以考慮使用虛擬列表，只渲染可視區域內的標簽。
懶加載：分批次加載標簽，初始只加載一部分，用戶滑動時再加載更多。
避免頻繁重新渲染：減少不必要的標簽狀態更新，特別是在選中標簽時。

下面是一個簡單的虛擬列表實現思路：

// 在標簽云組件中添加懶加載支持
props: {// ... 現有props ...lazyLoad: {type: Boolean,default: false},loadBatchSize: {type: Number,default: 20}
},
data() {return {// ... 現有data ...visibleTags: [],loadedCount: 0}
},
watch: {internalTags: {handler(newVal) {if (this.lazyLoad) {// 初始加載第一批this.loadMoreTags();} else {this.visibleTags = newVal;}},immediate: true}
},
methods: {// ... 現有methods ...loadMoreTags() {if (this.loadedCount >= this.internalTags.length) return;const nextBatch = this.internalTags.slice(this.loadedCount,this.loadedCount + this.loadBatchSize);this.visibleTags = [...this.visibleTags, ...nextBatch];this.loadedCount += nextBatch.length;},// 監聽滾動到底部onScrollToBottom() {if (this.lazyLoad) {this.loadMoreTags();}}
}