左右列表分类列表uview2.0高性能组件支持下拉加载

结构

<template>
	<view class="content">
		<view class="content-search">
			<u--input placeholder="前置图标" prefixIcon="search" border="false" shape="circle"
				prefixIconStyle="font-size: 22px;color: #909399;" customStyle="background:#f7f8fa"></u--input>
		</view>
		<u-tabs :list="tabsList" @click="tabsClick" :scrollable="false"></u-tabs>
		<view class="content-inner">
			<view class="left">
				<scroll-view @scroll="left_scroll" :scroll-top="leftScrollTop" :scroll-with-animation="true"
					:style="{'height': scrollHeight+'px'}" scroll-y="true" class="scroll-left"
					@scrolltoupper="left_upper" @scrolltolower="left_lower">
					<view class="scroll-left-view-item" :class="[leftCurrent==item.index ? 'left-item-active' : '' ]"
						v-for="(item,index) in leftList" :key="item.index" @click="leftMenuClick(item)">
						{{item.name}}
					</view>
				</scroll-view>
			</view>
			<view class="right">
				<u-list @scrolltolower="scrolltolower" @scroll="right_scroll" :enableBackToTop="true"
					:scrollTop="rightscrollTop" :scrollWithAnimation="true" :style="{'height': (scrollHeight-8)+'px'}">
					<u-list-item v-for="(item, index) in leftList" :key="index">
						<view class="item-content" @click="">
							<view class="item-img">
								<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" radius="8rpx" width="135rpx"
									height="135rpx"></u--image>
							</view>
							<view class="item-info">
								<view class="item-info-title">
									{{item.name}}
								</view>
								<view class="item-info-price">
									<view class="price">￥450</view>
									<view class="btn">购买</view>
								</view>
							</view>
						</view>
					</u-list-item>
				</u-list>
			</view>
		</view>
	</view>
</template>

逻辑

<script>
	import {
		//你的api
	} from '@/config/api.js'
	export default {
		data() {
			return {
				leftCurrent: 1,
				scrollHeight: 0,
				utabsH: 0,
				searchH: 0,
				tabsFlag: 0,
				leftScrollTop: 0,
				rightscrollTop: 0,
				params: {
					flag: '1', //类型：1.物料 2.物料包
					key: '', //关键字搜索
					pageNum: 1, //当前页数
					pageSize: 10, // 每页显示记录数
					type: '1',
				},
				tabsList: [{
					name: "物料"
				}, {
					name: "物料包"
				}],
				leftList: [{
						name: "物料",
						index: 1
					}, {
						name: "物料",
						index: 2
					},
					{
						name: "物料",
						index: 3
					},
					{
						name: "物料",
						index: 4
					},
					{
						name: "物料",
						index: 5
					},
					{
						name: "物料",
						index: 6
					},
					{
						name: "物料",
						index: 7
					},
					{
						name: "物料",
						index: 8
					},
					{
						name: "物料",
						index: 9
					},
					{
						name: "物料",
						index: 10
					},
					{
						name: "物料",
						index: 11
					},
					{
						name: "物料",
						index: 12
					},
					{
						name: "物料",
						index: 13
					},
					{
						name: "物料",
						index: 14
					},
					{
						name: "物料",
						index: 15
					}
				]
			};
		},
		onLoad() {
			// this.intData()
		},
		onReady() {
			let self = this;
			uni.createSelectorQuery().select('.u-tabs').boundingClientRect(data => {
				self.utabsH = data.height
			}).exec()
			uni.createSelectorQuery().select('.content-search').boundingClientRect(data => {
				self.searchH = data.height
			}).exec()
			uni.getSystemInfo({
				success: function(res) {
					self.scrollHeight = ((res.windowHeight + res.windowTop) - (self.utabsH + res
						.windowBottom + self.searchH)) + 8;
				},
			});
		},
		methods: {
			/** 初始数据  */
			intData() {
				
			},
			/** 顶部tabs  */
			tabsClick(e) {
				this.tabsFlag = e
				this.leftScrollTop = 0;
				this.rightscrollTop = 0;
				this.leftCurrent = 1;
			},
			/** 左侧菜单点击  */
			leftMenuClick(item) {
				this.leftCurrent = item.index
				this.rightscrollTop = 1;
			},

			left_upper(e) {
				// console.log(e)
			},
			left_lower(e) {
				// console.log(e)
			},
			left_scroll(e) {
				this.leftScrollTop = e.target.scrollTop;
			},
			/** 右侧滚动监听  */
			right_scroll(e) {
				this.rightscrollTop = e;
			},
			/** 滚动底部钩子  */
			scrolltolower(e) {

			},

		}
	}
</script>

样式

<style lang="scss" scoped>
	.content-search {
		padding: 12rpx 24rpx;
	}

	.content-inner {
		border-top: 1rpx solid #efefef;
		height: 100%;
	}

	.left {
		width: 200rpx;
		float: left;
		height: 100%;
		-webkit-overflow-scrolling: touch;
		overflow-x: hidden;
		overflow-y: auto;

		.scroll-left {
			// height: calc(100vh - 200rpx); // 某些情况下计算的宽度会超出手机宽度
		}

		.scroll-left-view-item {
			background-color: #efefef;
			text-align: center;
			line-height: 100rpx;
			height: 100rpx;
			font-size: 28rpx;
		}

		.left-item-active {
			background-color: #fff;
			border-left: 8rpx solid #007aff
		}
	}

	.right {
		margin-left: 200rpx;
		height: 100%;
		overflow: hidden;
		background-color: #fff;

		/deep/ .u-line {
			display: none;
		}

		.item-content {
			display: flex;
			padding: 24rpx;
		}

		.item-img {
			margin-right: 24rpx;
		}

		.item-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.item-info-title {
			font-size: 32rpx;
			color: #333;
		}

		.item-info-price {
			display: flex;
			justify-content: space-between;

			.price {
				font-size: 32rpx;
				color: #dd524d;
			}

			.btn {
				display: inline-block;
				width: 104rpx;
				height: 48rpx;
				background-color: #1084ff;
				border-radius: 24rpx;
				font-size: 26rpx;
				color: #ffffff;
				text-align: center;
				line-height: 48rpx;
			}
		}
	}
</style>

效果 点击左侧可重置右侧列表回到顶部 点击顶部菜单重置左右侧回到顶部