uniapp滑动器scroll-view

1.直接复制编译器
2.图片路径

<template>
	<view class="box-max">
		<view class="box-text">
			可能认识的人
		</view>
		<!-- scroll-left="120"；右边的元素上来的距离 -->
		<scroll-view class="sw" scroll-x="true">
			<view class="box">
				<view class="sw_item" v-for="(item,index) in 6">
					<!-- 上 -->
					<view class="sw_item_top">
						<image src="../../../static/index/images/icon9.png" mode="heightFix"></image>
						<view class="sw_item_top_text">
							<text class="sw_item_top_text_1">梁文思</text>
							<text class="sw_item_top_text_2">华北理工大学</text>
						</view>
					</view>
					<!-- 下 -->
					<view class="sw_item_buttom">
						<view class="sw_item_buttom1">删除</view>
						<view class="sw_item_buttom2">+关注</view>
					</view>
				</view>
			</view>
			
		</scroll-view>
		
		<view class="box-text2">
			<text>全部显示</text>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
			}
	}
</script>

<style lang="scss" scoped>
	// 可能认识的人
	.box-text{
		padding-top: 30rpx;
		width: 750rpx;
		// background-color: blue;
		font-size: 29rpx;
		color: #e0e0e0;
		// line-height: 3.5;
		text-indent: 23rpx;
	}
	.sw {
		/* 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */
		white-space: nowrap;
		width: 100%;
		@include flex('start');
		border-bottom: 1rpx solid #e0e0e0;
		.box{
			width: auto;
			height: 200rpx;
			@include flex('start');
			flex-wrap: nowrap;
		}
		.sw_item {
			// display: inline-block;
			flex-shrink: 0;
			width: 35%;
			height: 160rpx;
			border-right: 1rpx solid #e0e0e0;
			@include flex('column')
				image{
					height: 60rpx;
					width: 60rpx;
					border-radius: 30rpx;
				}
			.sw_item_top{
				width: 223rpx;
				height: 60rpx;
				@include flex('between');
				.sw_item_top_text{
					width: 145rpx;
					height: 60rpx;
					@include flex('column')
					.sw_item_top_text_1{
						font-size:29rpx;
						margin-right: 60rpx;
					}
					.sw_item_top_text_2{
						font-size:22rpx;
						color: #e0e0e0;
					}
				}
			}
			.sw_item_buttom{
				width: 235rpx;
				height: 46rpx;
				// background-color: blue;
				margin-top: 30rpx;
				@include flex('around');
				.sw_item_buttom1{
					width: 99rpx;
					height: 45rpx;
					// background-color: pink;
					border: 1rpx solid #000000;
					border-radius: 10rpx;
					text-align: center;
				}
				.sw_item_buttom2{
					width: 99rpx;
					height: 45rpx;
					color: #feaa0b;
					// background-color: pink;
					border: 1rpx solid #feaa0b;
					border-radius: 10rpx;
					text-align: center;
				}
			}
		}
	}
	.box-text2{
		height: 60rpx;
		margin-top: 10rpx;
		color: #bebebe;
		text-align: center;
		border-bottom: 16rpx solid #dadada;
	}
</style>