yixiang/pageA/huati.vue

<template>
	<view class="content">
		<view class="search">
			<u-search placeholder="搜索话题" :disabled="true" clearabled :showAction="false" @click="tosearch"></u-search>
		</view>
		<view class="hflex center">
			<scroll-view class="left" :scroll-y="true">
				<view class="left-item" :class="left_active == index ? 'left-active' : ''"
					v-for="(item,index) in left_list" :key="index" @click="toleft(index)">
					<text>{{item.name}}</text>
				</view>
			</scroll-view>
			<scroll-view class="right" :scroll-y="true">
				<view class="right-item" v-for="(item,index) in list" :key="index" @click="toinfo(item)">
					<text>{{item.title}}</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		data() {
			return {
				keyword: '',
				left_list: [],
				left_active: 0,
				list: [],
				type: '',
				page: 1,
				limit: 10
			}
		},
		onLoad(option) {
			if (option.type) {
				this.type = option.type
			}
			this.getleft()
		},
		onShow() {

		},
		onPullDownRefresh() {

		},
		onReachBottom() {

		},
		methods: {
			toinfo(item) {

				if (this.type == 'select') {
					const eventChannel = this.getOpenerEventChannel();
					eventChannel.emit('getitem', item);
					uni.navigateBack()
				} else {
					uni.navigateTo({
						url: '/pageA/topic-detail?id=' + item.id
					})
				}
			},
			toleft(index) {
				this.left_active = index
				this.list = []
				this.getlist()
			},
			tosearch() {
				uni.navigateTo({
					url: '/pageA/huati-search'
				})
			},
			getlist() {
				var _this = this
				$api.req({
					url: 'topic',
					method: 'GET',
					data: {
						page: _this.page,
						limit: _this.limit,
						category_id: _this.left_list[_this.left_active].id
					}
				}, function(res) {
					if (res.code == 10000) {
						_this.list = res.data.list
					}
				})
			},
			getleft() {
				var _this = this
				$api.req({
					url: 'topic/category',
					method: 'GET',
				}, function(res) {
					if (res.code == 10000) {
						_this.left_list = res.data
						_this.getlist()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content::v-deep {
		background: #FFFFFF;

		.search {
			width: 694rpx;
			height: 76rpx;
			background: #F5F5F5;
			border-radius: 16rpx;
			margin: 0 auto;
		}

		.center {
			box-sizing: border-box;
			padding: 36rpx 0 0;

			.right {
				box-sizing: border-box;
				padding: 0 28rpx 0 60rpx;

				.right-item {
					padding: 34rpx 0;
					border-bottom: 1px solid #F4F4F4;
				}

				.right-item:last-child {
					border: none;
				}
			}

			.left {
				height: calc(100vh - 192rpx);
				width: 204rpx;
				background: #F5F5F5;

				.left-item {
					width: 100%;
					padding: 26rpx 0;
					box-sizing: border-box;
					background: #F5F5F5;
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #999999;
					text-align: center;
				}

				.left-active {
					color: #222222;
					background: #FFFFFF;
				}
			}
		}
	}
</style>