hldy_app_mini/pages/NursingNew/component/leftcontent/leftcontent.vue

<template>
	<view>
		<view class="letbox" :style="style">
			<view class="logomain">
				<image src="/static/shouye/logo2.png" mode="aspectFill"></image>
			</view>
			<view class="topcpnt">
				<view class="iconst to0" @click="scoltop(0)" v-if="codesc>0">
					<view class="to0">
						<image src="/static/shouye/xjt.png" mode="aspectFill" style="transform: rotate(180deg);"></image>
					</view>
				</view>
				<scroll-view class="cont" :scroll-y="true" :scroll-top="scrolltop" @scroll="scroll"  scroll-with-animation @scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower">
					<view class="items" v-for="(v,i) in list" :key='i' @click="naurl(i);emit('navurl',i,v)">
						<view class="tm guodu" :class="{'act':i==dexleft}">
							<image :src="i==dexleft?v.urls:v.url" mode="aspectFill" class="guodu"></image>
							<text>{{v.name}}</text>
						</view>
						<!-- <view class="heng guodu" :style="i!=dexleft&&i!=list.length-1?'opacity: 1':'opacity: 0'"></view> -->
					</view>
				</scroll-view>
				<view class="iconst bot0" @click="scoltop(1)" v-if="codesc!=2&&codesc>=0">
					<view class="bot0">
						<image src="/static/shouye/xjt.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			
			
			<view class="logo" @click="uni.navigateTo({
				url:'/pages/watch/settings/settings'
			})">
				<view class="tp">
					<image :src="userInfo.avatar?serverUrl+'/sys/common/static/'+userInfo.avatar:'/static/shouye/xd.png'" mode="aspectFill"></image>
				</view>
				<text>{{uni.getStorageSync('realname')}}</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch, reactive } from 'vue';
	const props = defineProps({
		list: {
			type: Array 
		},
		style:{
			type:String
		},
		userInfo:{
			type:Object
		}
	});
	const serverUrl = ref(uni.getStorageSync('serverUrl'))
	// const userInfo = uni.getStorageSync('userInfo');
	const emit = defineEmits(['navurl'])
	const dexleft = ref(0);
	const scrolltop = ref(0)
	const topsc = ref(0);
	const dex = ref(0)
	watch(()=>props.list,
	()=>{
		codesc.value = -1;
		dex.value = props.list.length - 6;
		if(dex.value>0){
			codesc.value = 0;
		}else{
			codesc.value = -1;
		}
	})
	const scroll = (e)=>{
		// console.log(e.detail.scrollTop)
		let m = dex.value*52;
		
		topsc.value = e.detail.scrollTop;
		if(topsc.value<30){
			codesc.value = 0;
		}
		if(topsc.value>(m-30)){
			codesc.value = 2;
		}
		if(topsc.value>=30 && topsc.value<=(m-30)){
			codesc.value = 1;
		}
	}
	const scoltop =(e)=>{
		if(e==0){
			scrolltop.value = topsc.value;
			nextTick(()=>{
				scrolltop.value = 0;
			})
		}else{
			scrolltop.value = topsc.value;
			nextTick(()=>{
				scrolltop.value = 999;
			})
		}
	}
	const codesc = ref(0)
	const scrolltoupper =()=>{
		// 顶
		if(dex.value>0){
			codesc.value = 0;
		}else{
			codesc.value = -1;
		}
	}
	const scrolltolower =()=>{
		// 底
		codesc.value = 2;
	}
	const naurl = (e)=>{
		dexleft.value = e;
		scrolltop.value = (e - 2) * 52;
	}
</script>

<style scoped lang="less">
	.letbox{
		width: 8.2vw;
		height: 100vh;
		background:#fff;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding: 2.3vw 0 1vw 0;
		margin-right: 3vw;
		.logo{
			width: 3.8vw;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			view{
				width: 3.8vw;
				height: 3.8vw;
			}
			text{
				font-size: 1.2vw;
				margin-top: 0.6vw;
				color: #666666;
			}
			.tp image{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.logomain{
			width: 6vw;
			height: 6vw;
			 image{
				width: 100%;
				height: 100%;
			}
		}
		.topcpnt{
			width: 6vw;
			display: flex;
			flex-direction: column;
			height: 60vh;
			padding: 4vh 0 ;
			position: relative;
			margin-top: -5vh;
			
			.iconst{
				width: 6vw;
				height: 4vw;
				position: absolute;
				left: 0;
				view{
					width: 1.3vw;
					height: 1.2vw;
					border-radius: 50%;
					border: 1px solid #666;
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					left: 2.35vw;
				}
				image{
					width: .7vw;
					height: .4vw;
				}
			}
			.to0{
				top: 0;
			}
			.bot0{
				bottom:0 !important;
			}
		}
		.cont{
			width: 6vw;
			display: flex;
			flex-direction: column;
			height: 52vh;
			// background-color: red;
			.act{
				background: RGBA(228, 229, 231, 1);
				border-radius: 1.1vw;
				.tm{
					image{
						width: 2.2vw !important;
						height: 2.2vw !important;
					}
				}
			}
			.items{
				width: 6vw;
				height: 5.5vw;
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
				justify-content: space-between;
				padding: 0.3vw 0.2vw;
				.tm{
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 0.2vw 0;
					image{
						width: 2vw;
						height: 2vw;
					}
					text{
						font-weight: 400;
						font-size: 0.9vw;
						color: #666666;
					}
				}
				
				.heng{
					position: absolute;
					left: 1.2vw;
					bottom: -0.6vw;
					width: 1.6vw;
					height: 2px;
					border-radius: 1px;
					background: #c9c9c9;
				}
			}
		}
	}
	
	.guodu {
		transition: .4s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch;
	}
</style>