uniapp滑动器scroll-view

古城微笑少年丶 2022-11-18 13:42 296阅读 0赞

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

<template>
    	<view class="box-max">
    		<view class="box-text">
    			可能认识的人
    		</view>
    		
    		<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>