|
|
@ -7,14 +7,18 @@ |
|
|
|
default-tab-choice 是 我的角色 && 当前展示 |
|
|
|
default-tab-item 是 我的角色 && 当前不展示 |
|
|
|
tab-choice 不是我的 && 当前展示 |
|
|
|
TODO: |
|
|
|
--> |
|
|
|
<view |
|
|
|
:class="{ |
|
|
|
'default-tab-choice': +item.mine === 1 && roleId === item.id, |
|
|
|
'default-tab-item': +item.mine === 1 && roleId !== item.id, |
|
|
|
'tab-choice': +item.mine === 0 && roleId === item.id, |
|
|
|
'default-tab-choice': item.mine == 1 && roleId === item.id, |
|
|
|
'default-tab-item': item.mine == 1 && roleId !== item.id, |
|
|
|
'tab-choice': item.mine == 0 && roleId === item.id, |
|
|
|
}" |
|
|
|
--> |
|
|
|
<view :key="index" @click="changeRole(item.id, index)" class="tab-item" v-for="(item, index) in roles"> |
|
|
|
:key="index" |
|
|
|
@click="changeRole(item.id, index)" |
|
|
|
class="tab-item" |
|
|
|
v-for="(item, index) in roles" |
|
|
|
> |
|
|
|
<view class="tab-children u-skeleton-fillet u-font-14"> |
|
|
|
{{ item.name }} |
|
|
|
</view> |
|
|
@ -74,18 +78,23 @@ export default { |
|
|
|
|
|
|
|
// 设置滚动位置 |
|
|
|
setCurrentRole(index) { |
|
|
|
console.log('index: ', index); |
|
|
|
const data = document.getElementsByClassName('tab-children'); |
|
|
|
// 获取当前所有子元素 并插入到 tabList 列表中 |
|
|
|
const query = uni.createSelectorQuery().in(this); |
|
|
|
query |
|
|
|
.selectAll('.tab-children') |
|
|
|
.boundingClientRect(data => { |
|
|
|
data.forEach(item => { |
|
|
|
this.tabList.push({ |
|
|
|
width: item.clientWidth, |
|
|
|
left: item.offsetLeft, |
|
|
|
width: item.width, |
|
|
|
left: item.left, |
|
|
|
}); |
|
|
|
}); |
|
|
|
//当前滚动的位置 |
|
|
|
}) |
|
|
|
.exec(); |
|
|
|
|
|
|
|
const system = uni.getSystemInfoSync(); // 获取系统信息 |
|
|
|
// 当前滚动的位置 |
|
|
|
let left = 0; |
|
|
|
let screenWidth = window.screen.width; |
|
|
|
let screenWidth = system.windowWidth; |
|
|
|
for (let i = 0; i < index; i++) { |
|
|
|
left += this.tabList[i].width + this.tabList[i].left * 2; |
|
|
|
} |
|
|
@ -102,7 +111,7 @@ export default { |
|
|
|
this.clearPluginScript(); |
|
|
|
this.$nextTick(() => { |
|
|
|
this.setRoleId(id); |
|
|
|
//改变index 即手动点击切换 我在此时将当前元素赋值给左边距 实现自动滚动 |
|
|
|
// 改变index 即手动点击切换 我在此时将当前元素赋值给左边距 实现自动滚动 |
|
|
|
this.setCurrentRole(index); |
|
|
|
}); |
|
|
|
} catch (error) { |
|
|
|