這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 前言 我們打開百度這個網站並刷新多次時時，註意到百度的logo是沒有每次都載入一遍的。我們知道圖片是img標簽中的src屬性載入出來的，這也需要瀏覽器去請求圖片資源的，那麼為什麼刷新多次瀏覽器只請求了一次圖片資源呢？這就涉及到了瀏覽器的緩 ...
隨著技術的發展，開發的複雜度也越來越高，傳統開發方式將一個系統做成了整塊應用，經常出現的情況就是一個小小的改動或者一個小功能的增加可能會引起整體邏輯的修改，造成牽一發而動全身。
通過組件化開發，可以有效實現單獨開發，單獨維護，而且他們之間可以隨意的進行組合。大大提升開發效率低，降低維護成本。 組件化對於任何一個業務場景複雜的前端應用以及經過多次迭代之後的產品來說都是必經之路。組件化要做的不僅僅是錶面上看到的模塊拆分解耦，其背後還有很多工作來支撐組件化的進行，例如結合業務特性的模塊拆分策略、模塊間的交互方式和構建系統等等
今天給大家介紹的一款組件是：自定義商品訂單tabs標題欄選項卡組件 可設置文字下劃線顏色，附帶源碼下載地址：https://ext.dcloud.net.cn/plugin?id=13485
效果圖如下：
cc-orderTabs
使用方法
<!-- colors：設置顏色 tabList：tabs數組 active：當前選擇序列 tabsClick：點擊事件 -->
<view class="nav_top" style="border-bottom: 1upx solid #F8F8F8;margin-top: 10px;">
<cc-orderTabs :colors="colors" :tabList="tabList" :active="active" @tabsClick="tabsClick"></cc-orderTabs>
</view>
HTML代碼實現部分
<template>
<view class="content">
<!-- colors：設置顏色 tabList：tabs數組 active：當前選擇序列 tabsClick：點擊事件 -->
<view class="nav_top" style="border-bottom: 1upx solid #F8F8F8;margin-top: 10px;">
<cc-orderTabs :colors="colors" :tabList="tabList" :active="active" @tabsClick="tabsClick"></cc-orderTabs>
</view>
<!-- colors：設置顏色 tabList：tabs數組 active：當前選擇序列 tabsClick：點擊事件 -->
<view class="nav_top" style="border-bottom: 1upx solid lightgray;margin-top: 160px;">
<cc-orderTabs colors="orange" :tabList="tabListTwo" :active="activeTwo"
@tabsClick="tabsClickTwo"></cc-orderTabs>
</view>
</view>
</template>
<script>
export default {
components: {
},
data() {
return {
colors: '#fa436a',
tabList: [{
name: '待付款',
id: 0
}, {
name: '待發貨',
id: 1
}, {
name: '待收貨',
id: 2
}, {
name: '待評價',
id: 3
},
{
name: '已完成',
id: 4
}
],
active: 0,
tabListTwo: [{
name: '食品飲料',
id: 0
}, {
name: '新能源電池',
id: 1
}, {
name: '航空航天',
id: 2
}, {
name: '半導體晶元',
id: 3
}],
activeTwo: 0,
}
},
methods: {
tabsClick(item, index) {
this.active = item.id
},
tabsClickTwo(item, index) {
this.activeTwo = item.id
},
}
}
</script>
<style lang="scss" scoped>
.content {
display: flex;
flex-direction: column;
}
</style>
