|
|
@ -4,7 +4,7 @@ |
|
|
<scroll-view :enable-flex="true" :scroll-left="scrollLeft" :throttle="false" scroll-with-animation scroll-x> |
|
|
<scroll-view :enable-flex="true" :scroll-left="scrollLeft" :throttle="false" scroll-with-animation scroll-x> |
|
|
<view class="tabBox"> |
|
|
<view class="tabBox"> |
|
|
<view :key="index" @click="changeIndex(index)" class="tab-item" v-for="(item, index) in roles"> |
|
|
<view :key="index" @click="changeIndex(index)" class="tab-item" v-for="(item, index) in roles"> |
|
|
<view :class="setColor(item.isMine, tabIndex, index)" class="tab-children u-skeleton-rect">{{ item.value }}</view> |
|
|
<view :class="setColor(item.mine, tabIndex, index)" class="tab-children u-skeleton-rect">{{ item.name }}</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
<u-skeleton :animation="true" :loading="loading" bgcolor="#fff"></u-skeleton> |
|
|
<u-skeleton :animation="true" :loading="loading" bgcolor="#fff"></u-skeleton> |
|
|
@ -22,16 +22,16 @@ export default { |
|
|
tabList: [], //tab dom节点集合 |
|
|
tabList: [], //tab dom节点集合 |
|
|
scrollLeft: 0, //scrollview需要滚动的距离 |
|
|
scrollLeft: 0, //scrollview需要滚动的距离 |
|
|
roles: [ |
|
|
roles: [ |
|
|
{ id: 1, value: '项目经理', isMine: 0 }, |
|
|
{ id: 1, name: '项目经理', mine: 0, pm: 1, sequence: 1 }, |
|
|
{ id: 2, value: '运维', isMine: 0 }, |
|
|
{ id: 2, name: '运维', mine: 0, pm: 0, sequence: 2 }, |
|
|
{ id: 3, value: '导师一', isMine: 1 }, |
|
|
{ id: 3, name: '导师一', mine: 1, pm: 0, sequence: 3 }, |
|
|
{ id: 4, value: '导师二', isMine: 1 }, |
|
|
{ id: 4, name: '导师二', mine: 1, pm: 0, sequence: 4 }, |
|
|
{ id: 5, value: '导师三', isMine: 1 }, |
|
|
{ id: 5, name: '导师三', mine: 1, pm: 0, sequence: 5 }, |
|
|
{ id: 6, value: '导师四', isMine: 1 }, |
|
|
{ id: 6, name: '导师四', mine: 1, pm: 0, sequence: 6 }, |
|
|
{ id: 7, value: '导师五', isMine: 1 }, |
|
|
{ id: 7, name: '导师五', mine: 1, pm: 0, sequence: 7 }, |
|
|
{ id: 8, value: '导师六', isMine: 1 }, |
|
|
{ id: 8, name: '导师六', mine: 1, pm: 0, sequence: 8 }, |
|
|
{ id: 9, value: '导师七', isMine: 1 }, |
|
|
{ id: 9, name: '导师七', mine: 1, pm: 0, sequence: 9 }, |
|
|
{ id: 10, value: '导师八', isMine: 1 }, |
|
|
{ id: 10, name: '导师八', mine: 1, pm: 0, sequence: 10 }, |
|
|
], |
|
|
], |
|
|
loading: true, // 是否显示骨架屏组件 |
|
|
loading: true, // 是否显示骨架屏组件 |
|
|
}; |
|
|
}; |
|
|
@ -68,14 +68,14 @@ export default { |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
// 设置文字颜色 |
|
|
// 设置文字颜色 |
|
|
setColor(isMine, tabIndex, index) { |
|
|
setColor(mine, tabIndex, index) { |
|
|
if (isMine === 1 && tabIndex === index) { |
|
|
if (mine === 1 && tabIndex === index) { |
|
|
return 'default-tab-choice'; |
|
|
return 'default-tab-choice'; |
|
|
} |
|
|
} |
|
|
if (isMine === 1 && tabIndex !== index) { |
|
|
if (mine === 1 && tabIndex !== index) { |
|
|
return 'default-tab-item'; |
|
|
return 'default-tab-item'; |
|
|
} |
|
|
} |
|
|
if (isMine === 0 && tabIndex === index) { |
|
|
if (mine === 0 && tabIndex === index) { |
|
|
return 'tab-choice'; |
|
|
return 'tab-choice'; |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
@ -84,9 +84,6 @@ export default { |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
|
$tabChoiceColor: #f40; //设置选中文字和底部下划线背景颜色 |
|
|
|
|
|
$max: 100%; |
|
|
|
|
|
|
|
|
|
|
|
// 这是最外层盒子 |
|
|
// 这是最外层盒子 |
|
|
.wrap { |
|
|
.wrap { |
|
|
position: relative; |
|
|
position: relative; |
|
|
@ -120,13 +117,13 @@ $max: 100%; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.default-tab-item { |
|
|
.default-tab-item { |
|
|
color: $tabChoiceColor; |
|
|
color: $roleChoiceColor; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.default-tab-choice { |
|
|
.default-tab-choice { |
|
|
//当前选中 基于此类名给与底部选中框 |
|
|
//当前选中 基于此类名给与底部选中框 |
|
|
position: relative; |
|
|
position: relative; |
|
|
color: $tabChoiceColor; |
|
|
color: $roleChoiceColor; |
|
|
font-weight: 600; |
|
|
font-weight: 600; |
|
|
} |
|
|
} |
|
|
.default-tab-choice:before { |
|
|
.default-tab-choice:before { |
|
|
@ -137,7 +134,7 @@ $max: 100%; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 6rpx; |
|
|
height: 6rpx; |
|
|
border-radius: 2rpx; |
|
|
border-radius: 2rpx; |
|
|
background: $tabChoiceColor; |
|
|
background: $roleChoiceColor; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.tab-choice { |
|
|
.tab-choice { |
