digitalMen/components/wike-scrollview/wike-scrollview.vue

<template>
	<view class="flex">
		<scroll-view scroll-y="true" style="width: 30%;"
			:style="{height:scrollHeight + 'px','background-color':leftBgColor,'font-size':leftFs+'rpx'}">
			<view v-for="(item,index) in viewList" class="text-overflow flex py-30 pr-20 align-center"
				@click="leftClick(index,item)" :class="activeIndex==index?'selected':''">
				<view style="width: 8rpx;height: 50rpx;"
					:style="{'background-color':activeIndex==index?leftSelected:''}"></view>
				<view class="pl-20" :style="{color:activeIndex==index?leftSelectedColor:'',width: 115+'px'}">
					{{item.title}}
				</view>
			</view>
		</scroll-view>
		<scroll-view scroll-y="true"  style="width: 70%;"
			:style="{ height:scrollHeight + 'px','background-color':rightBgColor,'font-size':rightFs+'rpx'}">
			<view class="wike_ad">
				<wike-ad></wike-ad>
			</view>
			
				<navigator v-for="(item, index) in viewList[activeIndex].children" :key="index" class="helpme" :url="'/pages/template/detail?id=' + item.id">
					
					<view class="title">{{ item.title }}</view>
					<view class="sub_title">{{ item.sub_title }}</view>
				</navigator>
			
				<view style="height: 30rpx;">
					
				</view>
			
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "gjs-scrollView",
		props: {
			//左右列表
			viewList: {
				type: Array,
				default: []
			},
			//scroll-view的高度
			scrollHeight: {
				type: Number,
				default: 826
			},
			//左边区域的背景色
			leftBgColor: {
				type: String,
				default: '#F6F6F6'
			},
			//右边区域的背景色
			rightBgColor: {
				type: String,
				default: '#FFFFFF'
			},
			//左边区域的字体大小(最好不改)
			leftFs: {
				type: Number,
				default: 34
			},
			// //右边区域的字体大小(最好不改)
			rightFs: {
				type: Number,
				default: 32
			},
			//左边选中的颜色
			leftSelected: {
				type: String,
				default: '#26b3a0'
			},
			leftSelectedColor: {
				type: String,
				default: '#26b3a0'
			}
		},
		data() {
			return {
				activeIndex: 0,
				position: 'sv-0',
				// leftFs: 32,
				// rightFs: 32,
				
			};
		},
		methods: {
			leftClick(e, item) {
				this.activeIndex = e
				this.$emit('leftClick', item.title)
			},
			rightClick(e) {
				this.$emit('rightClick', e)
			},
		}
	}
</script>

<style lang="scss">
	

	.flex {
		display: flex;
		flex-direction: row;
	}
    .py-30 {
      padding-top: 30rpx;
      padding-bottom: 30rpx;
    }
	.pr-20 {
	  padding-right: 20rpx;
	}
	.pl-20 {
	  padding-left: 20rpx;
	}
	.selected {
		background-color: #FFFFFF;
	}

	/* 超出部分显示... */
	.text-overflow {
		
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*不换行*/
		text-overflow: ellipsis;
		/*超出部分文字以...显示*/
	}

	.align-center {
		align-items: center;
	}
	
	.helpme {
		background: #f5f8f7;
		border-radius: 20rpx;
		padding: 30rpx;
		margin: 30rpx;
		/* width: 48%;
	
		margin-bottom: 30rpx; */
	
		/* height: 92px; */
	
		.title {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 18rpx;
			color: #000;
			overflow:hidden; text-overflow:ellipsis; white-space:nowrap
		}
	
		.sub_title {
			color: #8f9ca2;
			font-size: 24rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		}
	}
	.wike_ad{
		margin: 30rpx;
	}
	//去掉横向滚动条
	/* 滚动条宽度 */
	#noneScrollbar .el-scrollbar__thumb {
	  display: none;
	}
	#noneScrollbar .el-scrollbar__wrap {
	  overflow-x: hidden;
	  overflow-y: auto;
	}
</style>