forked from ccsens_fe/tall-mui-3
23 changed files with 356 additions and 289 deletions
Binary file not shown.
@ -0,0 +1,180 @@ |
|||||
|
<template> |
||||
|
<view class="wrap"> |
||||
|
<view class="homeBox"> |
||||
|
<scroll-view :enable-flex="true" :scroll-left="scrollLeft" :throttle="false" scroll-with-animation scroll-x> |
||||
|
<view class="tabBox"> |
||||
|
<view :key="index" @click="changeIndex(index)" class="tab-item" v-for="(item, index) in roles"> |
||||
|
<view :class="setColor(item.mine, tabIndex, index)" class="tab-children u-skeleton-rect">{{ item.name }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<u-skeleton :animation="true" :loading="loading" bgcolor="#fff"></u-skeleton> |
||||
|
</scroll-view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'RoleList', |
||||
|
data() { |
||||
|
return { |
||||
|
tabIndex: 0, //当前访问的 index 默认为0 |
||||
|
tabList: [], //tab dom节点集合 |
||||
|
scrollLeft: 0, //scrollview需要滚动的距离 |
||||
|
roles: [ |
||||
|
{ id: 1, name: '项目经理', mine: 0, pm: 1, sequence: 1 }, |
||||
|
{ id: 2, name: '运维', mine: 0, pm: 0, sequence: 2 }, |
||||
|
{ id: 3, name: '导师一', mine: 1, pm: 0, sequence: 3 }, |
||||
|
{ id: 4, name: '导师二', mine: 1, pm: 0, sequence: 4 }, |
||||
|
{ id: 5, name: '导师三', mine: 1, pm: 0, sequence: 5 }, |
||||
|
{ id: 6, name: '导师四', mine: 1, pm: 0, sequence: 6 }, |
||||
|
{ id: 7, name: '导师五', mine: 1, pm: 0, sequence: 7 }, |
||||
|
{ id: 8, name: '导师六', mine: 1, pm: 0, sequence: 8 }, |
||||
|
{ id: 9, name: '导师七', mine: 1, pm: 0, sequence: 9 }, |
||||
|
{ id: 10, name: '导师八', mine: 1, pm: 0, sequence: 10 }, |
||||
|
], |
||||
|
loading: true, // 是否显示骨架屏组件 |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
mounted() { |
||||
|
this.init(); |
||||
|
setTimeout(() => { |
||||
|
this.loading = false; |
||||
|
console.log('this.loading: ', this.loading); |
||||
|
}, 5000); |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
init() { |
||||
|
const data = document.getElementsByClassName('tab-children'); |
||||
|
// TODO 第一步 获取当前所以子元素 并插入到 tabList 列表中 |
||||
|
data.forEach(item => { |
||||
|
this.tabList.push({ width: item.clientWidth, left: item.offsetLeft }); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
changeIndex(index) { |
||||
|
//改变index 即手动点击切换 我在此时将当前元素赋值给左边距 实现自动滚动 |
||||
|
this.tabIndex = index; |
||||
|
//当前滚动的位置 |
||||
|
let left = 0; |
||||
|
let screenWidth = window.screen.width; |
||||
|
for (let i = 0; i < index; i++) { |
||||
|
left += this.tabList[i].width + this.tabList[i].left * 2; |
||||
|
} |
||||
|
left += this.tabList[index].width; |
||||
|
this.scrollLeft = left - screenWidth / 2; |
||||
|
}, |
||||
|
|
||||
|
// 设置文字颜色 |
||||
|
setColor(mine, tabIndex, index) { |
||||
|
if (mine === 1 && tabIndex === index) { |
||||
|
return 'default-tab-choice'; |
||||
|
} |
||||
|
if (mine === 1 && tabIndex !== index) { |
||||
|
return 'default-tab-item'; |
||||
|
} |
||||
|
if (mine === 0 && tabIndex === index) { |
||||
|
return 'tab-choice'; |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
// 这是最外层盒子 |
||||
|
.wrap { |
||||
|
position: relative; |
||||
|
background: #f7f7f7; |
||||
|
} |
||||
|
|
||||
|
.homeBox { |
||||
|
// 对此盒子进行 sticky 粘性定位 |
||||
|
position: sticky; |
||||
|
top: 0; |
||||
|
background: #fff; //设置背景 否则会透明 |
||||
|
/* #ifdef H5 */ |
||||
|
//粘性定位 在h5下 加 原生头部高度 44px |
||||
|
top: 88rpx; |
||||
|
|
||||
|
/* #endif */ |
||||
|
.tabBox { |
||||
|
position: relative; |
||||
|
white-space: nowrap; |
||||
|
// height: 88rpx; |
||||
|
|
||||
|
/* #ifdef MP-TOUTIAO */ |
||||
|
/* #endif */ |
||||
|
.tab-item { |
||||
|
padding: 20rpx 24rpx; |
||||
|
position: relative; |
||||
|
display: inline-block; |
||||
|
text-align: center; |
||||
|
font-size: 30rpx; |
||||
|
transition-property: background-color, width; |
||||
|
} |
||||
|
|
||||
|
.default-tab-item { |
||||
|
color: $roleChoiceColor; |
||||
|
} |
||||
|
|
||||
|
.default-tab-choice { |
||||
|
//当前选中 基于此类名给与底部选中框 |
||||
|
position: relative; |
||||
|
color: $roleChoiceColor; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
.default-tab-choice:before { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
bottom: -20rpx; |
||||
|
width: 100%; |
||||
|
height: 6rpx; |
||||
|
border-radius: 2rpx; |
||||
|
background: $roleChoiceColor; |
||||
|
} |
||||
|
|
||||
|
.tab-choice { |
||||
|
//当前选中 基于此类名给与底部选中框 |
||||
|
position: relative; |
||||
|
color: $uni-color-primary; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.tab-choice:before { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
bottom: -20rpx; |
||||
|
width: 100%; |
||||
|
height: 6rpx; |
||||
|
border-radius: 2rpx; |
||||
|
background: $uni-color-primary; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// // 删除 底部滚动条 |
||||
|
/* #ifndef APP-NVUE */ |
||||
|
::-webkit-scrollbar, |
||||
|
::-webkit-scrollbar, |
||||
|
::-webkit-scrollbar { |
||||
|
display: none; |
||||
|
width: 0 !important; |
||||
|
height: 0 !important; |
||||
|
-webkit-appearance: none; |
||||
|
background: transparent; |
||||
|
} |
||||
|
|
||||
|
/* #endif */ |
||||
|
/* #ifdef H5 */ |
||||
|
// 通过样式穿透，隐藏H5下，scroll-view下的滚动条 |
||||
|
scroll-view ::v-deep ::-webkit-scrollbar { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
/* #endif */ |
||||
|
</style> |
||||
@ -0,0 +1,57 @@ |
|||||
|
<!-- |
||||
|
* @Author: aBin |
||||
|
* @email: binbin0314@126.com |
||||
|
* @Date: 2021-07-19 14:15:35 |
||||
|
* @LastEditors: aBin |
||||
|
* @LastEditTime: 2021-07-20 14:22:11 |
||||
|
--> |
||||
|
<template> |
||||
|
<!-- <Barrier /> --> |
||||
|
<scroll-view |
||||
|
:lower-threshold="300" |
||||
|
:scrollTop="scrollTop" |
||||
|
:scrollY="true" |
||||
|
:upper-threshold="300" |
||||
|
@scroll="scroll" |
||||
|
@scrolltolower="handleScrollBottom" |
||||
|
@scrolltoupper="handleScrollTop" |
||||
|
> |
||||
|
<TimeBox ref="child" /> |
||||
|
</scroll-view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// import Barrier from './component/Barrier.vue'; |
||||
|
import { mapState, mapMutations } from 'vuex'; |
||||
|
import TimeBox from './component/TimeBox.vue'; |
||||
|
export default { |
||||
|
name: 'TimeLine', |
||||
|
components: { TimeBox }, |
||||
|
data() { |
||||
|
return { scrollTop: 0, top: 0 }; |
||||
|
}, |
||||
|
computed: mapState('home', ['scrollTop', 'showTips']), |
||||
|
methods: { |
||||
|
...mapMutations('home', ['setScrollTop', 'setShrink']), |
||||
|
// 滚动 |
||||
|
scroll(e) { |
||||
|
console.log(e.detail.scrollTop); |
||||
|
this.top = e.detail.scrollTop; |
||||
|
this.setShrink(this.top > this.scrollTop); |
||||
|
this.setScrollTop(this.top); |
||||
|
}, |
||||
|
|
||||
|
// 滚动到顶部 |
||||
|
handleScrollTop() { |
||||
|
console.log('滚动到顶部'); |
||||
|
this.$refs.child.addTopList(); |
||||
|
}, |
||||
|
|
||||
|
// 滚动到底部 |
||||
|
handleScrollBottom() { |
||||
|
console.log('滚动到底部'); |
||||
|
this.$refs.child.addBottomList(); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
@ -1,42 +0,0 @@ |
|||||
<!-- |
|
||||
* @Author: aBin |
|
||||
* @email: binbin0314@126.com |
|
||||
* @Date: 2021-07-19 14:15:35 |
|
||||
* @LastEditors: Please set LastEditors |
|
||||
* @LastEditTime: 2021-07-20 15:01:45 |
|
||||
--> |
|
||||
<template> |
|
||||
<view class="main"> |
|
||||
<Barrier /> |
|
||||
<scroll-view :scrollY="true" :scrollTop="top" :style="{ height: height }" @scroll="scroll"> |
|
||||
<!-- <scroll-view scroll-y="true" style="height: 400px"> --> |
|
||||
<TimeBox /> |
|
||||
</scroll-view> |
|
||||
<Tips /> |
|
||||
</view> |
|
||||
</template> |
|
||||
<script> |
|
||||
import { mapState, mapMutations } from 'vuex'; |
|
||||
import Barrier from './components/Barrier.vue'; |
|
||||
import TimeBox from './components/TimeBox.vue'; |
|
||||
import Tips from 'components/Tips/index.vue'; |
|
||||
export default { |
|
||||
name: 'TimeLine', |
|
||||
components: { Barrier, TimeBox, Tips }, |
|
||||
data() { |
|
||||
return { height: '', top: 0 }; |
|
||||
}, |
|
||||
computed: mapState('home', ['scrollTop', 'showTips']), |
|
||||
mounted() { |
|
||||
this.height = document.getElementsByClassName('main')[0].clientHeight - 30 + 'px'; |
|
||||
}, |
|
||||
methods: { |
|
||||
...mapMutations('home', ['setScrollTop', 'setShrink']), |
|
||||
scroll(e) { |
|
||||
this.top = e.detail.scrollTop; |
|
||||
this.setShrink(this.top > this.scrollTop); |
|
||||
this.setScrollTop(this.top); |
|
||||
}, |
|
||||
}, |
|
||||
}; |
|
||||
</script> |
|
||||
Loading…
Reference in new issue