yichael_zhongchuan_manager/pages/test/test.vue

<template>
	<view class="list_box">
		<view class="left">
			<scroll-view scroll-y="true" :style="{ 'height':scrollHeight }">
				<view class="item" v-for="(item,index) in leftArray" :key="index" :class="{ 'active':index==leftIndex }"
				 :data-index="index" @tap="leftTap">{{item}}</view>
			</scroll-view>
		</view>
		<view class="main">
			<swiper class="swiper" :style="{ 'height':scrollHeight }" :current="leftIndex" @change="swiperChange" vertical="true"
			 duration="300">
				<swiper-item v-for="(item,index) in mainArray" :key="index">
					<scroll-view scroll-y="true" :style="{ 'height':scrollHeight }">
						<view class="item">
							<view class="title">
								<view>
									<a :href="item.url">{{item.title}}</a>
								</view>
								<image :src="item.thumbnail_pic_s" style="width: 250rpx; height: 250rpx;margin-left: 6rpx;" mode=""></image>
								<image :src="item.thumbnail_pic_s02" style="width: 250rpx; height: 250rpx;margin-left: 6rpx;" mode=""></image>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollHeight: '500px',
				leftArray: ['生活', '娱乐', '社会'],
				mainArray: [{
					"uniquekey": "6c4caa0c3ba6e05e2a272892af43c00e",
					"title": "杨幂的发际线再也回不去了么？网友吐槽像半秃",
					"date": "2017-01-05 11:03",
					"category": "yule",
					"author_name": "腾讯娱乐",
					"url": "http://mini.eastday.com/mobile/170105110355287.html?qid=juheshuju",
					"thumbnail_pic_s": "http://03.imgmini.eastday.com/mobile/20170105/20170105110355_806f4ed3fe71d04fa452783d6736a02b_1_mwpm_03200403.jpeg",
					"thumbnail_pic_s02": "http://03.imgmini.eastday.com/mobile/20170105/20170105110355_806f4ed3fe71d04fa452783d6736a02b_2_mwpm_03200403.jpeg",
					"thumbnail_pic_s03": "http://03.imgmini.eastday.com/mobile/20170105/20170105110355_806f4ed3fe71d04fa452783d6736a02b_3_mwpm_03200403.jpeg"
				}],
				leftIndex: 0
			}
		},
		onLoad() {
			/* 设置当前滚动容器的高，若非窗口的高度，请自行修改 */
			uni.getSystemInfo({
				success: (res) => {
					this.scrollHeight = `${res.windowHeight}px`;
				}
			});
		},
		methods: {
			/* 左侧导航点击 */
			leftTap(e) {
				let index = e.currentTarget.dataset.index;
				this.leftIndex = Number(index);
			},
			/* 轮播图切换 */
			swiperChange(e) {
				let index = e.detail.current;
				this.leftIndex = Number(index);
			}
		}
	}
</script>

<style >
	.list_box {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
		font-size: 28rpx;

		.left {
			width: 200rpx;
			background-color: #f6f6f6;
			line-height: 80rpx;
			box-sizing: border-box;
			font-size: 32rpx;

			.item {
				padding-left: 20rpx;
				position: relative;

				&:not(:first-child) {
					margin-top: 1px;

					&::after {
						content: '';
						display: block;
						height: 0;
						border-top: #d6d6d6 solid 1px;
						width: 620upx;
						position: absolute;
						top: -1px;
						right: 0;
						transform: scaleY(0.5);
						/* 1px像素 */
					}
				}

				&.active,
				&:active {
					color: #42b983;
					background-color: #fff;
				}
			}
		}

		.main {
			background-color: #fff;
			padding-left: 20rpx;
			width: 0;
			flex-grow: 1;
			box-sizing: border-box;

			.swiper {
				height: 500px;
			}

			.title {
				line-height: 64rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #666;
				background-color: #fff;
				position: sticky;
				top: 0;
				z-index: 999;
			}

			.item {
				padding-bottom: 10rpx;
			}

			.goods {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: flex-start;
				align-items: center;
				align-content: center;
				margin-bottom: 10rpx;

				&>image {
					width: 120rpx;
					height: 120rpx;
					margin-right: 16rpx;
				}

				.describe {
					font-size: 24rpx;
					color: #999;
				}

				.money {
					font-size: 24rpx;
					color: #efba21;
				}
			}
		}
	}
</style>