tall小程序和时间轴结合在小程序中
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

86 lines
2.1 KiB

<!--
* @Author: aBin
* @email: binbin0314@126.com
* @Date: 2021-07-19 10:52:05
* @LastEditors: aBin
* @LastEditTime: 2021-07-19 11:09:23
-->
<template>
<view class="wrap">
<view class="rolebar">
<view>
<view class="container u-skeleton" v-if="roles || roles.length">
<!-- <u-tag
:key="role.id"
:mode="currentRoleIndex === index ? 'dark' : 'light'"
:text="role.value"
:type="role.isMine === 1 ? 'warning' : role.isMine === 0 && currentRoleIndex === index ? 'primary' : ''"
@tap="handleClickRole(index)"
class="u-m-15"
shape="circle"
v-for="(role, index) in roles"
></u-tag>-->
<u-tabs
:bar-width="barWidth"
:current="currentRoleIndex"
:list="roles"
@change="handleClickRole"
class="u-skeleton-rect"
name="value"
ref="tabs"
></u-tabs>
<!-- <u-tabs
:bar-width="barWidth"
:current="currentRoleIndex"
:list="roles"
@change="handleClickRole"
class="u-skeleton-rect"
ref="tabs"
>
<template v-slot:name>
<span :key="role.id" v-for="role in roles">{{ role.value }}</span>
</template>
</u-tabs>-->
</view>
<u-skeleton :animation="true" :loading="loading" bgcolor="#fff" v-else></u-skeleton>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'Roles',
data() {
return {
roles: [
{ id: 1, value: '项目经理', isMine: 0 },
{ id: 2, value: '运维', isMine: 0 },
{ id: 3, value: '导师一', isMine: 1 },
{ id: 4, value: '导师二', isMine: 1 },
{ id: 5, value: '导师三', isMine: 1 },
],
currentRoleIndex: 0,
barWidth: 80,
loading: true, // 是否显示骨架屏组件
};
},
methods: {
handleClickRole(index) {
console.log('index: ', index);
this.currentRoleIndex = index;
},
},
};
</script>
<style scoped lang="scss">
.container {
padding: 20rpx;
}
</style>