33 changed files with 812 additions and 262 deletions
@ -1,69 +1,70 @@ |
|||||
# 0.1.0 (2021-07-20) |
# 0.1.0 (2021-07-21) |
||||
|
|
||||
|
### 🌟 新功能 |
||||
范围|描述|commitId |
范围|描述|commitId |
||||
--|--|-- |
--|--|-- |
||||
- | style:index | [978f272](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/978f272) |
- | db store | [6414c4f](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/6414c4f) |
||||
- | !2 基础模板v1.1.0 | [f5e61dd](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/f5e61dd) |
- | indexedDB | [687394e](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/687394e) |
||||
- | init | [c0f1deb](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/c0f1deb) |
- | 提交到本地 | [9cbe411](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/9cbe411) |
||||
|
- | 时间轴界面 | [33927e9](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/33927e9) |
||||
|
- | 标题栏变化 | [c0fcd9d](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/c0fcd9d) |
||||
|
- | 标题栏角色栏全局任务组件新建 | [0500cb4](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/0500cb4) |
||||
|
- | 模拟接口测试 | [69e7931](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/69e7931) |
||||
|
- | 角色栏实现 | [94cd671](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/94cd671) |
||||
|
pinch | alloy finger实现图片的pinch放大缩小 | [de01343](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/de01343) |
||||
|
富文本插件 | 富文本插件demo测试 | [ed3d644](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/ed3d644) |
||||
|
|
||||
|
|
||||
### 🌟 新功能 |
|
||||
范围|描述|commitId |
范围|描述|commitId |
||||
--|--|-- |
--|--|-- |
||||
- | 标题栏变化 | [c0fcd9d](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/c0fcd9d) |
- | style:index | [978f272](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/978f272) |
||||
- | 标题栏角色栏全局任务组件新建 | [0500cb4](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/0500cb4) |
- | !2 基础模板v1.1.0 | [f5e61dd](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/f5e61dd) |
||||
- | 角色栏实现 | [94cd671](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/94cd671) |
- | init | [c0f1deb](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/c0f1deb) |
||||
- | 时间轴界面 | [33927e9](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/33927e9) |
|
||||
- | 提交到本地 | [9cbe411](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/9cbe411) |
|
||||
- | db store | [6414c4f](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/6414c4f) |
|
||||
- | indexedDB | [687394e](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/687394e) |
|
||||
富文本插件 | 富文本插件demo测试 | [ed3d644](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/ed3d644) |
|
||||
pinch | alloy finger实现图片的pinch放大缩小 | [de01343](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/de01343) |
|
||||
|
|
||||
|
|
||||
### 🎨 代码样式 |
### 🎨 代码样式 |
||||
范围|描述|commitId |
范围|描述|commitId |
||||
--|--|-- |
--|--|-- |
||||
- | 更新代码 | [8c27e68](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/8c27e68) |
- | 任务快捷方式图标增加 | [4aba872](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/4aba872) |
||||
- | 更新代码 | [1f40a76](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/1f40a76) |
- | 图标修改 | [54bca09](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/54bca09) |
||||
- | 任务快捷方式图标增加 | [4aba872](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/4aba872) |
- | 无基本变化 | [21ac4bb](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/21ac4bb) |
||||
- | 图标修改 | [54bca09](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/54bca09) |
- | 更新代码 | [8c27e68](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/8c27e68) |
||||
- | 无基本变化 | [21ac4bb](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/21ac4bb) |
- | 更新代码 | [1f40a76](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/1f40a76) |
||||
- | 组件新建 | [89c0035](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/89c0035) |
- | 组件新建 | [89c0035](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/89c0035) |
||||
|
|
||||
|
|
||||
### 🐛 Bug 修复 |
### 🐛 Bug 修复 |
||||
范围|描述|commitId |
范围|描述|commitId |
||||
--|--|-- |
--|--|-- |
||||
- | 修改main | [749ae9a](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/749ae9a) |
- | 修改main | [749ae9a](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/749ae9a) |
||||
|
|
||||
|
|
||||
### 📝 文档 |
### 📝 文档 |
||||
范围|描述|commitId |
范围|描述|commitId |
||||
--|--|-- |
--|--|-- |
||||
- | README.md | [ab0eb05](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/ab0eb05) |
- | README.md | [ab0eb05](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/ab0eb05) |
||||
|
|
||||
|
|
||||
### 🔨 代码重构 |
### 🔨 代码重构 |
||||
范围|描述|commitId |
范围|描述|commitId |
||||
--|--|-- |
--|--|-- |
||||
template | eslint prettier sass uview tailwindcss | [9c966a1](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/9c966a1) |
template | eslint prettier sass uview tailwindcss | [9c966a1](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/9c966a1) |
||||
|
|
||||
|
|
||||
### 🚀 性能优化 |
### 🚀 性能优化 |
||||
范围|描述|commitId |
范围|描述|commitId |
||||
--|--|-- |
--|--|-- |
||||
- | 角色栏文字颜色修改 | [215c6b3](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/215c6b3) |
- | 组件文件夹新建 | [22bfe7b](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/22bfe7b) |
||||
- | 组件文件夹新建 | [22bfe7b](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/22bfe7b) |
- | 组件文件夹新建 | [17bb8c9](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/17bb8c9) |
||||
- | 组件文件夹新建 | [17bb8c9](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/17bb8c9) |
- | 组件文件夹新建 | [1421504](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/1421504) |
||||
- | 组件文件夹新建 | [1421504](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/1421504) |
- | 角色栏文字颜色修改 | [215c6b3](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/215c6b3) |
||||
|
|
||||
|
|
||||
### chore |
### chore |
||||
范围|描述|commitId |
范围|描述|commitId |
||||
--|--|-- |
--|--|-- |
||||
- | mock | [51c24a5](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/51c24a5) |
- | mock | [51c24a5](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/51c24a5) |
||||
pwa 小程序 | 移除了pwa，alloyFinger添加平台判断 | [875fab4](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/875fab4) |
pwa 小程序 | 移除了pwa，alloyFinger添加平台判断 | [875fab4](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/875fab4) |
||||
- | uview-ui | [a9ea34b](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/a9ea34b) |
- | uview-ui | [a9ea34b](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/a9ea34b) |
||||
信息配置 | 配置eslint等配置 | [7421443](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/7421443) |
信息配置 | 配置eslint等配置 | [7421443](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/7421443) |
||||
|
|
||||
|
|||||
Binary file not shown.
@ -0,0 +1,58 @@ |
|||||
|
<template> |
||||
|
<view class="m-2"> |
||||
|
<u-card margin="0" :show-head="false" :show-foot="false" border-radius="25" :style="{ height: isShrink ? '96rpx' : '300rpx' }"> |
||||
|
<!-- <u-card margin="0" :show-head="false" :show-foot="false" border-radius="25" style="height: 300rpx"> --> |
||||
|
<view slot="body"> |
||||
|
<scroll-view :scrollY="true" :style="{ height: isShrink ? '40rpx' : '240rpx' }"> |
||||
|
<view class="u-col-between p-0 u-skeleton"> |
||||
|
<view class="u-line-2 u-skeleton-rect"> 瓶身描绘的牡丹一如你初妆</view> |
||||
|
<view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view> |
||||
|
<view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view> |
||||
|
<view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view> |
||||
|
<view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view> |
||||
|
<view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view> |
||||
|
<view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view> |
||||
|
<view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view> |
||||
|
<view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view> |
||||
|
<view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view> |
||||
|
<view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view> |
||||
|
<view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆222</view> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
</view> |
||||
|
</u-card> |
||||
|
<!-- <u-skeleton :animation="true" :loading="true" bgcolor="#fff"></u-skeleton> --> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapState } from 'vuex'; |
||||
|
export default { |
||||
|
name: 'Global', |
||||
|
data() { |
||||
|
return {}; |
||||
|
}, |
||||
|
computed: mapState('home', ['isShrink']), |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.u-card-wrap { |
||||
|
background-color: $u-bg-color; |
||||
|
padding: 1px; |
||||
|
} |
||||
|
|
||||
|
.u-body-item { |
||||
|
font-size: 32rpx; |
||||
|
color: #333; |
||||
|
padding: 20rpx 10rpx; |
||||
|
} |
||||
|
|
||||
|
.u-body-item image { |
||||
|
width: 120rpx; |
||||
|
flex: 0 0 120rpx; |
||||
|
height: 120rpx; |
||||
|
border-radius: 8rpx; |
||||
|
margin-left: 12rpx; |
||||
|
} |
||||
|
</style> |
||||
@ -1,50 +0,0 @@ |
|||||
<!-- |
|
||||
* @Author: aBin |
|
||||
* @email: binbin0314@126.com |
|
||||
* @Date: 2021-07-19 10:52:05 |
|
||||
* @LastEditors: aBin |
|
||||
* @LastEditTime: 2021-07-19 16:37:35 |
|
||||
--> |
|
||||
<template> |
|
||||
<view> |
|
||||
<u-card margin="0" :show-head="false" :show-foot="false" border-radius="25"> |
|
||||
<view slot="body"> |
|
||||
<view class="u-col-between p-0 u-skeleton"> |
|
||||
<view class="u-line-2 u-skeleton-rect"> 瓶身描绘的牡丹一如你初妆</view> |
|
||||
<view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view> |
|
||||
<view class="u-line-2 u-skeleton-rect mt-2"> 瓶身描绘的牡丹一如你初妆</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</u-card> |
|
||||
<u-skeleton :loading="true" :animation="true" bgColor="#fff"></u-skeleton> |
|
||||
</view> |
|
||||
</template> |
|
||||
<script> |
|
||||
export default { |
|
||||
name: 'Global', |
|
||||
data() { |
|
||||
return {}; |
|
||||
}, |
|
||||
}; |
|
||||
</script> |
|
||||
|
|
||||
<style scoped lang="scss"> |
|
||||
.u-card-wrap { |
|
||||
background-color: $u-bg-color; |
|
||||
padding: 1px; |
|
||||
} |
|
||||
|
|
||||
.u-body-item { |
|
||||
font-size: 32rpx; |
|
||||
color: #333; |
|
||||
padding: 20rpx 10rpx; |
|
||||
} |
|
||||
|
|
||||
.u-body-item image { |
|
||||
width: 120rpx; |
|
||||
flex: 0 0 120rpx; |
|
||||
height: 120rpx; |
|
||||
border-radius: 8rpx; |
|
||||
margin-left: 12rpx; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,87 +1,20 @@ |
|||||
<!-- |
|
||||
* @Author: aBin |
|
||||
* @email: binbin0314@126.com |
|
||||
* @Date: 2021-07-19 10:52:05 |
|
||||
* @LastEditors: aBin |
|
||||
* @LastEditTime: 2021-07-19 18:42:51 |
|
||||
--> |
|
||||
<template> |
<template> |
||||
<view class="wrap"> |
<view class="wrap bg-white px-2"> |
||||
<view class="rolebar"> |
<role-list /> |
||||
<view> |
|
||||
<view class="container" v-if="roles || roles.length"> |
|
||||
<!-- <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" |
|
||||
:class="'isMine' ? '#f00' : ''" |
|
||||
:current="currentRoleIndex" |
|
||||
:list="roles" |
|
||||
@change="handleClickRole" |
|
||||
class="u-skeleton-rect" |
|
||||
name="value" |
|
||||
ref="tabs" |
|
||||
> |
|
||||
</u-tabs> |
|
||||
</view> |
|
||||
<u-skeleton :animation="true" :loading="loading" bgcolor="#fff" v-else></u-skeleton> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
import RoleList from './component/RoleList'; |
||||
|
|
||||
export default { |
export default { |
||||
name: 'Roles', |
name: 'Roles', |
||||
|
components: { RoleList }, |
||||
data() { |
data() { |
||||
return { |
return {}; |
||||
roles: [ |
|
||||
{ id: 1, value: '项目经理', isMine: false }, |
|
||||
{ id: 2, value: '运维', isMine: true }, |
|
||||
{ id: 3, value: '导师一', isMine: false }, |
|
||||
{ id: 4, value: '导师二', isMine: true }, |
|
||||
{ id: 5, value: '导师三', isMine: true }, |
|
||||
], |
|
||||
currentRoleIndex: 0, |
|
||||
barWidth: 80, |
|
||||
loading: false, // 是否显示骨架屏组件 |
|
||||
}; |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.getItem(); |
|
||||
}, |
|
||||
methods: { |
|
||||
handleClickRole(index) { |
|
||||
this.getItem(); |
|
||||
console.log('index: ', index); |
|
||||
this.currentRoleIndex = index; |
|
||||
}, |
|
||||
getItem() { |
|
||||
var dom = document.getElementsByClassName('u-tab-item'); |
|
||||
for (let i = 0; i < dom.length; i++) { |
|
||||
let id = dom[i].id; |
|
||||
for (let k = 0; k < this.roles.length; k++) { |
|
||||
let item = this.roles[k]; |
|
||||
if (dom[i].textContent === item.value && item.isMine) { |
|
||||
document.getElementById(`${id}`).style.color = 'red'; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
}, |
}, |
||||
|
methods: {}, |
||||
}; |
}; |
||||
</script> |
</script> |
||||
|
|
||||
<style scoped lang="scss"> |
<style scoped lang="scss"></style> |
||||
.container { |
|
||||
padding: 20rpx; |
|
||||
} |
|
||||
</style> |
|
||||
|
|||||
@ -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,183 @@ |
|||||
|
<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 u-skeleton"> |
||||
|
<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> |
||||
|
</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, value: '项目经理', isMine: 0 }, |
||||
|
{ id: 2, value: '运维', isMine: 0 }, |
||||
|
{ id: 3, value: '导师一', isMine: 1 }, |
||||
|
{ id: 4, value: '导师二', isMine: 1 }, |
||||
|
{ id: 5, value: '导师三', isMine: 1 }, |
||||
|
{ id: 6, value: '导师四', isMine: 1 }, |
||||
|
{ id: 7, value: '导师五', isMine: 1 }, |
||||
|
{ id: 8, value: '导师六', isMine: 1 }, |
||||
|
{ id: 9, value: '导师七', isMine: 1 }, |
||||
|
{ id: 10, value: '导师八', isMine: 1 }, |
||||
|
], |
||||
|
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(isMine, tabIndex, index) { |
||||
|
if (isMine === 1 && tabIndex === index) { |
||||
|
return 'default-tab-choice'; |
||||
|
} |
||||
|
if (isMine === 1 && tabIndex !== index) { |
||||
|
return 'default-tab-item'; |
||||
|
} |
||||
|
if (isMine === 0 && tabIndex === index) { |
||||
|
return 'tab-choice'; |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
$tabChoiceColor: #f40; //设置选中文字和底部下划线背景颜色 |
||||
|
$max: 100%; |
||||
|
|
||||
|
// 这是最外层盒子 |
||||
|
.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: 15rpx 24rpx; |
||||
|
position: relative; |
||||
|
display: inline-block; |
||||
|
text-align: center; |
||||
|
font-size: 30rpx; |
||||
|
transition-property: background-color, width; |
||||
|
} |
||||
|
|
||||
|
.default-tab-item { |
||||
|
color: $tabChoiceColor; |
||||
|
} |
||||
|
|
||||
|
.default-tab-choice { |
||||
|
//当前选中 基于此类名给与底部选中框 |
||||
|
position: relative; |
||||
|
color: $tabChoiceColor; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
.default-tab-choice:before { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
bottom: -14rpx; |
||||
|
width: 100%; |
||||
|
height: 6rpx; |
||||
|
border-radius: 2rpx; |
||||
|
background: $tabChoiceColor; |
||||
|
} |
||||
|
|
||||
|
.tab-choice { |
||||
|
//当前选中 基于此类名给与底部选中框 |
||||
|
position: relative; |
||||
|
color: $uni-color-primary; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.tab-choice:before { |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
bottom: -14rpx; |
||||
|
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,56 @@ |
|||||
|
<!-- |
||||
|
* @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="top" |
||||
|
: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 { top: 0 }; |
||||
|
}, |
||||
|
computed: mapState('home', ['scrollTop', 'showTips']), |
||||
|
methods: { |
||||
|
...mapMutations('home', ['setScrollTop', 'setShrink']), |
||||
|
// 滚动 |
||||
|
scroll(e) { |
||||
|
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,28 +0,0 @@ |
|||||
<!-- |
|
||||
* @Author: aBin |
|
||||
* @email: binbin0314@126.com |
|
||||
* @Date: 2021-07-19 14:15:35 |
|
||||
* @LastEditors: aBin |
|
||||
* @LastEditTime: 2021-07-19 16:44:12 |
|
||||
--> |
|
||||
<template> |
|
||||
<view> |
|
||||
<Barrier /> |
|
||||
<scroll-view scroll-y="true" style="height: 1000rpx"> |
|
||||
<view style="position: relative"> |
|
||||
<TimeBox /> |
|
||||
</view> |
|
||||
</scroll-view> |
|
||||
</view> |
|
||||
</template> |
|
||||
<script> |
|
||||
import Barrier from './components/Barrier.vue'; |
|
||||
import TimeBox from './components/TimeBox.vue'; |
|
||||
export default { |
|
||||
name: 'TimeLine', |
|
||||
components: { Barrier, TimeBox }, |
|
||||
data() { |
|
||||
return {}; |
|
||||
}, |
|
||||
}; |
|
||||
</script> |
|
||||
@ -0,0 +1,73 @@ |
|||||
|
<template> |
||||
|
<view |
||||
|
class="fixed shadow-2xl shadow-2xl" |
||||
|
style="z-index: 1000" |
||||
|
:style="{ |
||||
|
left: client.left + 'px', |
||||
|
top: height - client.top > 110 ? client.top + 'px' : '', |
||||
|
bottom: height - client.top > 110 ? '' : '10px', |
||||
|
}" |
||||
|
id="u-icard" |
||||
|
> |
||||
|
<u-card |
||||
|
:title="title" |
||||
|
style="width: 500rpx; margin: 0 !important" |
||||
|
v-if="showTips" |
||||
|
titleSize="28" |
||||
|
:headStyle="headStyle" |
||||
|
:footStyle="footStyle" |
||||
|
> |
||||
|
<view class="" slot="body"> {{ tipsContent }} </view> |
||||
|
<view class="flex ustify-between" slot="foot"> |
||||
|
<u-button size="mini" @tap="clickCancel">取消</u-button> |
||||
|
<u-button v-if="status === 1" size="mini" @tap="clickCancel">暂停</u-button> |
||||
|
<u-button v-if="status === 2" size="mini" @tap="clickCancel">继续</u-button> |
||||
|
<u-button v-if="status === 1 || status === 2" size="mini" @tap="clickCancel">重新开始</u-button> |
||||
|
<u-button v-if="status === 1 || status === 2" type="primary" size="mini" @tap="clickCancel">结束</u-button> |
||||
|
<u-button v-if="status === 0 || status === 3" type="primary" size="mini" @tap="clickOk">确定</u-button> |
||||
|
</view> |
||||
|
</u-card> |
||||
|
<u-toast ref="uToast" /> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapState, mapMutations } from 'vuex'; |
||||
|
export default { |
||||
|
name: 'Tips', |
||||
|
props: { |
||||
|
title: { |
||||
|
default: '提示', |
||||
|
type: String, |
||||
|
}, |
||||
|
}, |
||||
|
computed: mapState('home', ['client', 'showTips', 'status', 'tipsContent']), |
||||
|
data() { |
||||
|
return { |
||||
|
footStyle: { padding: '4px 15px' }, |
||||
|
headStyle: { paddingTop: '8px', paddingBottom: '8px' }, |
||||
|
height: 0, |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.height = window.screen.height; |
||||
|
}, |
||||
|
methods: { |
||||
|
...mapMutations('home', ['setTips']), |
||||
|
clickOk() { |
||||
|
this.$refs.uToast.show({ |
||||
|
title: '点击了确定', |
||||
|
type: 'success', |
||||
|
}); |
||||
|
this.setTips(false); |
||||
|
}, |
||||
|
clickCancel() { |
||||
|
this.$refs.uToast.show({ |
||||
|
title: '点击了取消', |
||||
|
type: 'error', |
||||
|
}); |
||||
|
this.setTips(false); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
@ -0,0 +1,3 @@ |
|||||
|
const actions = {}; |
||||
|
|
||||
|
export default actions; |
||||
@ -0,0 +1,3 @@ |
|||||
|
const getters = {}; |
||||
|
|
||||
|
export default getters; |
||||
@ -0,0 +1,12 @@ |
|||||
|
import state from './state'; |
||||
|
import getters from './getters'; |
||||
|
import mutations from './mutations'; |
||||
|
import actions from './actions'; |
||||
|
|
||||
|
export default { |
||||
|
namespaced: true, |
||||
|
state, |
||||
|
getters, |
||||
|
mutations, |
||||
|
actions, |
||||
|
}; |
||||
@ -0,0 +1,52 @@ |
|||||
|
const mutations = { |
||||
|
/** |
||||
|
* 记录时间轴向上滚动的距离 |
||||
|
* @param { object } state |
||||
|
* @param { number } num |
||||
|
*/ |
||||
|
setScrollTop(state, num) { |
||||
|
state.scrollTop = num; |
||||
|
}, |
||||
|
/** |
||||
|
* 设置日常任务当前是否应该处于收缩状态 |
||||
|
* @param { object } state |
||||
|
* @param { boolean } data |
||||
|
*/ |
||||
|
setShrink(state, data) { |
||||
|
state.isShrink = data; |
||||
|
}, |
||||
|
/** |
||||
|
* 存储鼠标点击位置 |
||||
|
* @param { object } state |
||||
|
* @param { object } data |
||||
|
*/ |
||||
|
setClient(state, data) { |
||||
|
state.client = { ...data }; |
||||
|
}, |
||||
|
/** |
||||
|
* 是否显示tips |
||||
|
* @param { object } state |
||||
|
* @param { boolean } data |
||||
|
*/ |
||||
|
setTips(state, data) { |
||||
|
state.showTips = data; |
||||
|
}, |
||||
|
/** |
||||
|
* 是否显示tips |
||||
|
* @param { object } state |
||||
|
* @param { number } data |
||||
|
*/ |
||||
|
setStatus(state, data) { |
||||
|
state.status = data; |
||||
|
}, |
||||
|
/** |
||||
|
* 是否显示tips |
||||
|
* @param { object } state |
||||
|
* @param { string } data |
||||
|
*/ |
||||
|
setTipsContent(state, data) { |
||||
|
state.tipsContent = data; |
||||
|
}, |
||||
|
}; |
||||
|
|
||||
|
export default mutations; |
||||
@ -0,0 +1,13 @@ |
|||||
|
const state = { |
||||
|
scrollTop: 0, |
||||
|
isShrink: false, // true: 收起， false：展开
|
||||
|
client: { |
||||
|
left: 0, // 鼠标点击位置距离左边的距离
|
||||
|
top: 0, // 鼠标点击位置距离上边的距离
|
||||
|
}, |
||||
|
showTips: false, |
||||
|
status: 0, // 点击了时间轴上的哪种样式，默认点击了开始
|
||||
|
tipsContent: '', // 提示框内的内容，需要传入
|
||||
|
}; |
||||
|
|
||||
|
export default state; |
||||
@ -0,0 +1,8 @@ |
|||||
|
import Vue from 'vue'; |
||||
|
import Vuex from 'vuex'; |
||||
|
import home from './home/index'; |
||||
|
import db from './db/index'; |
||||
|
import user from './user/index'; |
||||
|
|
||||
|
Vue.use(Vuex); |
||||
|
export default new Vuex.Store({ modules: { home, db, user } }); |
||||
Loading…
Reference in new issue