本文以 `React`、`Vue` 為例，介紹下主流的渲染模式以及在主流框架中如何實現上述的渲染模式。 ## 前置知識介紹 看渲染模式之前我們先看下幾個主流框架所提供的相關能力，瞭解的可跳到下個章節。 ### 掛載組件到 DOM 節點 這是主流框架最基本的能力，就是將組件渲染到指定的 `DOM` 節 ...
前端Vue自定義可自由滾動精美tabs選項卡標簽欄標題欄 可設置背景顏色， 下載完整代碼請訪問uni-app插件市場地址：https://ext.dcloud.net.cn/plugin?id=13313
效果圖如下：
cc-scrollTag
使用方法
<!-- tabChange: tab選擇事件 tagList：tab數據 bgColor:標簽背景顏色-->
<cc-scrollTag @tabChange="tabChange" :tagsList="tagList" bgColor="#FA436A"></cc-scrollTag>
HTML代碼實現部分
<template>
<view class="content">
<view style="height: 22px;margin: 12px 20px;">紅色背景滑動標簽欄</view>
<!-- tabChange: tab選擇事件 tagList：tab數據 bgColor:標簽背景顏色-->
<cc-scrollTag @tabChange="tabChange" :tagsList="tagList" bgColor="#FA436A"></cc-scrollTag>
<view style="height: 22px;margin: 12px 20px;">橙色背景滑動標簽欄</view>
<!-- tabChange: tab選擇事件 tagList：tab數據 bgColor:標簽背景顏色-->
<cc-scrollTag @tabChange="tabChange" :tagsList="tagListTwo" bgColor="#f37b1d"></cc-scrollTag>
<view style="height: 22px;margin: 12px 20px;">粉色背景滑動標簽欄</view>
<!-- tabChange: tab選擇事件 tagList：tab數據 bgColor:標簽背景顏色-->
<cc-scrollTag @tabChange="tabChange" :tagsList="tagList" bgColor="#e03997"></cc-scrollTag>
<view style="height: 22px;margin: 12px 20px;">綠色背景滑動標簽欄</view>
<!-- tabChange: tab選擇事件 tagList：tab數據 bgColor:標簽背景顏色-->
<cc-scrollTag @tabChange="tabChange" :tagsList="tagListTwo" bgColor="#39b54a"></cc-scrollTag>
<view style="height: 22px;margin: 12px 20px;">黃色背景滑動標簽欄</view>
<!-- tabChange: tab選擇事件 tagList：tab數據 bgColor:標簽背景顏色-->
<cc-scrollTag @tabChange="tabChange" :tagsList="tagList" bgColor="#fbbd08"></cc-scrollTag>
<view style="height: 22px;margin: 12px 20px;">橄欖色背景滑動標簽欄</view>
<!-- tabChange: tab選擇事件 tagList：tab數據 bgColor:標簽背景顏色-->
<cc-scrollTag @tabChange="tabChange" :tagsList="tagListTwo" bgColor="#8dc63f"></cc-scrollTag>
</view>
</template>
<script>
export default {
data() {
return {
tagList: [
'首頁', '標題一', '標題二', '標題三', '標題四',
'標題五', '標題六',
'標題七', '標題八'
],
tagListTwo: [
'推薦',
'選項一',
'選項二',
'選項三',
'選項四',
'選項五',
'選項六',
'選項七',
'選項八',
],
}
},
onLoad() {
},
methods: {
tabChange: function(t) {
console.log("tab選擇序列 = " + JSON.stringify(t));
},
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
}
</style>
