uniapp-canteen/pages/canteen/classification/index.vue

<template>
	<view>
		<view class="head">
			<uni-search-bar @confirm="search" placeholder="搜索供应商" radius="90" bgColor="#f6f6f6" ></uni-search-bar>
		</view>
		<view class="lf-flex content">
			<scroll-view :scroll-y="true" class="scroll-left"
				:style="{height: 'calc('+ windowHeight +'px - 222rpx)'}">
				<view class="tab-item" :class="{'activa': index == 0}" v-for="(item, index) in 3" :key="index">{{ '分类'+ (item + 1) }}</view>
			</scroll-view>
			<scroll-view :scroll-y="true" class="scroll-right"
				:style="{height: 'calc('+ windowHeight +'px - 222rpx)'}">
				<view class="supplier-item" v-for="(item, index) in 20" :key="index">
					<label class="lf-row-between">
						<view>供应商</view>
						<u-icon name="checkmark-circle-fill" size="40" color="#11D189"></u-icon>
					</label>
				</view>
				<view class="loading-more">
					<text class="loading-more-text">正在加载中...</text>
				</view>
			</scroll-view>
		</view>
		<!-- 操作按钮 -->
		<view class="fixed-bottom">
			<button class="btn btn1">取消</button>
			<button class="btn btn2">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				windowHeight: 0
			}
		},
		onLoad(){
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
		},
		methods: {
			search(event){
				console.log("search.event", event);
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	/deep/.uni-searchbar__box{
		border: none;
	}
	.head{
		padding: 14rpx 16rpx;
	}
	.scroll-left{
		width: 200rpx;
		background-color: #F6F6F6;
		.tab-item{
			height: 90rpx;
			width: 100%;
			text-align: center;
			line-height: 90rpx;
			font-size: 28rpx;
			color: #555555;
		}
		.activa{
			color: #11D189;
		}
	}
	.scroll-right{
		width: 550rpx;
		background-color: #FFFFFF;
		.supplier-item{
			padding: 30rpx 32rpx 30rpx 30rpx;
			width: 100%;
			height: max-content;
			box-sizing: border-box;
			border-bottom: 1rpx solid #e5e5e5;
			font-size: 28rpx;
			color: #222222;
		}
	}
	.fixed-bottom{
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		z-index: 99;
		width: 750rpx;
		height: 98rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1rpx solid #E5E5E5;
		background-color: #FFFFFF;
		box-sizing: border-box;
		padding: 0 32rpx;
		.btn{
			width: 320rpx;
			height: 82rpx;
			border-radius: 41rpx;
			margin: 0;
			padding: 0;
			font-size: 32rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.btn1{
			border: 2rpx solid #555555;
			opacity: .5;
		}
		.btn2{
			background: #11D189;
			color: #FFFFFF;
		}
	}
</style>