|
@@ -1,7 +1,21 @@
|
|
|
<template>
|
|
|
- <view class="common_page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
|
|
|
+ <view class="common_page adffc" :style="{'height':h+'px', 'padding-top':mt+'px'}">
|
|
|
<cus-header title="我的档案" bgColor="#FFFFFF"></cus-header>
|
|
|
+ <div class="member">
|
|
|
+ <scroll-view class="scroll-view_H" scroll-x="true" scroll-with-animation="true" :scroll-left="scrollLeft">
|
|
|
+ <view class="scroll-view-item_H" :id="'svih_'+index" v-for="(item,index) in memberList" :key="index" @tap="changeMember(item,index)">
|
|
|
+ <view class="cl_item" :class="{'active':midx===index}">
|
|
|
+ <text>{{item.name}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </div>
|
|
|
<div class="list">
|
|
|
+ <up-list @scrolltolower="scrolltolower" style="height: 100%;">
|
|
|
+ <up-list-item v-for="(item, index) in list" :key="index">
|
|
|
+ <ArchivesBox></ArchivesBox>
|
|
|
+ </up-list-item>
|
|
|
+ </up-list>
|
|
|
<ArchivesBox v-for="(item,index) in list" :key="index"></ArchivesBox>
|
|
|
</div>
|
|
|
</view>
|
|
@@ -11,15 +25,69 @@
|
|
|
import CusHeader from '@/components/CusHeader/index.vue'
|
|
|
import ArchivesBox from '@/components/pages/archivesBox/index.vue'
|
|
|
import { ref } from 'vue'
|
|
|
- import { onReachBottom } from '@dcloudio/uni-app';
|
|
|
|
|
|
+ const midx = ref(0)
|
|
|
+ const scrollLeft = ref(0)
|
|
|
+ const memberList = ref([
|
|
|
+ {id:1,name:'张三'},
|
|
|
+ {id:2,name:'李四'},
|
|
|
+ {id:3,name:'龙傲天'}
|
|
|
+ ])
|
|
|
const list = ref([1,1,1,1,1])
|
|
|
|
|
|
- onReachBottom(()=>{
|
|
|
-
|
|
|
- })
|
|
|
+ const changeMember = (item,index) => {
|
|
|
+ midx.value = index;
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
+ .scroll-view_H {
|
|
|
+ white-space: nowrap;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll-view-item_H {
|
|
|
+ display: inline-block;
|
|
|
+ height: 100%;
|
|
|
+ margin-left: 30rpx;
|
|
|
+ &:first-child{
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
+ .common_page{
|
|
|
+ padding: 0 0 40rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .member{
|
|
|
+ width: 100%;
|
|
|
+ height: 56rpx;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .cl_item{
|
|
|
+ padding: 0 26rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #252525;
|
|
|
+ line-height: 56rpx;
|
|
|
+ text-align: center;
|
|
|
+ &.active{
|
|
|
+ background: #B7F358;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .list{
|
|
|
+ padding: 0 24rpx;
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ margin-top: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|