前端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 >
<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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/556549.html
標籤：Html/Css
下一篇：返回列表