uniapp滑动器scroll-view

最新推荐文章于 2024-09-24 22:34:02 发布

MFG_666

最新推荐文章于 2024-09-24 22:34:02 发布

阅读量242

点赞数

分类专栏： uniapp知识点文章标签：小程序 vue.js javascript 前端 sass

本文链接：https://blog.csdn.net/m0_49714202/article/details/115663978

版权

uniapp知识点专栏收录该内容

64 篇文章 2 订阅

订阅专栏

本文展示了一个使用 Vue.js 实现的滑动视图组件，包含可能认识的人列表布局和相应的 UI 设计。利用 `scroll-view` 组件实现横向滚动效果，同时详细定义了各个子组件的样式，包括图片、姓名、学校信息以及删除和关注按钮的布局和样式。

摘要由CSDN通过智能技术生成

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>