lcoco/pages/index/model/user-info.vue

<template>
	<view class="user-info flex-common-css">
		<Nav class="nav-class" :bgckgroundBox="!isScroll?'transparent':'#fff'" :titleColor="isScroll?'#000':'#fff'">
		</Nav>
		<scroll-view :scroll-y="true" class="list-scroll" @scroll="scroll" @scrolltolower="scrolltolower">
			<view class="swiper-box">
				<swiper class="swiper" :circular="true" :indicator-dots="false" :autoplay="true" :current="currentIndex">
					<swiper-item v-for="(item,index) in swiperData" :key="index">
						<image class="swiper-img" :src="item.img" mode=""></image>
					</swiper-item>
				</swiper>
				<scroll-view class="" scroll-x="true" scroll-left="120" :class="!isScroll?'scroll-view_H':'scroll-view_H-two'">
					<image class="swiper-img-two sys-radius-16" v-for="(itemTwo,indexTwo) in swiperData" :key="indexTwo"
						:src="itemTwo.img" mode="" @click="selectImg(indexTwo)"></image>
				</scroll-view>
				<view class="blank-box sys-background-gray-f"></view>
			</view>
			<view class="content-box sys-background-gray-f">
				<view class="info-title">
					<view class="info-title-name sys-weight-600 sys-size-40 sys-color-black">
						最佳损友最佳损友最佳友最佳友最佳友最佳
					</view>
					<view class="like-but sys-background-F2F2F2 sys-radius-40">
						<uni-icons type="heart-filled" size="12" color="#FB4454"></uni-icons>
						<view class="like-but-text sys-size-24 sys-color-gray-6">
							108喜欢
						</view>
					</view>
				</view>
				<view class="tag-box">
					<view class="tag-list sys-background-F2F2F2 sys-radius-8">
						<uni-icons type="checkbox-filled" size="12" color="#FB4454"></uni-icons>
						<view class="tag-text sys-size-24 sys-color-gray-6">
							真实头像
						</view>
					</view>
				</view>
				<view class="introduce">
					<view class="distance sys-color-F47D12 sys-size-28 sys-weight-600">
						17.16km
					</view>
					<view class="info-introduce sys-size-24 sys-color-gray-6">
						重庆市 九龙坡 / 男/ 19岁
					</view>
				</view>
				<view class="hobby-box">
					<view class="hobby sys-radius-20">
						<view class="hobby-title sys-size-32 sys-color-black">
							崇尚自由，热爱生活，足以!
						</view>
						<view class="hobby-list">
							<view class="hobby-tag sys-radius-200" v-for="(itemThree,indexThree) in hobbyList" :key="indexThree">
								<uni-icons class="hobby-tag-icon" :type="itemThree.icon" size="24" color="#000000"></uni-icons>
								<view class="hobby-tag-name sys-size-28 sys-color-gray-6">
									{{itemThree.name}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="hello-box">
				<view class="hello-box-left sys-radius-16 sys-color-white sys-weight-600 sys-size-32"
					:class="listStyle==0?'sys-background-black':'sys-background-BF'">
					{{listStyle==0?'喜欢':'以喜欢'}}
				</view>
				<view class="hello-box-left hello-box-right sys-radius-16 sys-background-black">
					<uni-icons type="checkbox-filled" size="19" color="pink"></uni-icons>
					<view class="sys-color-white sys-weight-600 sys-size-32">
						打招呼
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				isScroll: false,
				currentIndex: 0,
				listStyle: 0,
				swiperData: [{
					'img': '/static/img/temporary/1.png',
				}, {
					'img': '/static/img/login/2.jpg',
				}, {
					'img': '/static/img/temporary/1.png',
				}, {
					'img': '/static/img/login/2.jpg',
				}, {
					'img': '/static/img/temporary/1.png',
				}, {
					'img': '/static/img/login/2.jpg',
				}, {
					'img': '/static/img/temporary/1.png',
				}, {
					'img': '/static/img/login/2.jpg',
				}, {
					'img': '/static/img/temporary/1.png',
				}, {
					'img': '/static/img/login/2.jpg',
				}],
				hobbyList: [{
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'chatbubble',
					'name': '音乐'
				}, {
					'icon': 'headphones',
					'name': '电影'
				}, {
					'icon': 'cart',
					'name': '购物'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, {
					'icon': 'checkbox-filled',
					'name': '认识朋友'
				}, {
					'icon': 'color',
					'name': '重庆科创职业学院'
				}, ]
			};
		},
		mounted() {},
		methods: {
			scroll(e) {
				if (e.detail.scrollTop > 250) {
					this.isScroll = true
				} else {
					this.isScroll = false
				}
			},
			scrolltolower() {
				console.log('触底');
			},
			selectImg(index) {
				this.currentIndex = index
			},
		},
	}
</script>

<style lang="scss" scoped>
	.user-info {
		.nav-class {
			position: absolute;
			left: 0;
			top: 0;
		}

		.list-scroll {
			width: 100%;
			flex: 1;
			overflow: auto;
			padding: 0 0 118rpx 0;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;

			.swiper-box {
				width: 100%;
				height: 960rpx;
				position: relative;

				.swiper {
					width: 100%;
					height: 100%;

					.swiper-img {
						width: 100%;
						height: 100%;
					}
				}

				.scroll-view_H {
					white-space: nowrap;
					width: 100%;
					padding: 0 38rpx 0 0;
					position: absolute;
					left: 40rpx;
					bottom: 58rpx;
					box-sizing: border-box;
					opacity: 1;
					transition: opacity 500ms ease-out;

					.swiper-img-two {
						width: 100rpx;
						height: 100rpx;
						border: 2rpx solid #FAFAFA;
						margin: 0 12rpx 0 0;
					}
				}

				.scroll-view_H-two {
					white-space: nowrap;
					width: 100%;
					padding: 0 38rpx 0 0;
					position: absolute;
					left: 40rpx;
					bottom: 58rpx;
					box-sizing: border-box;
					opacity: 0;
					transition: opacity 500ms ease-out;

					.swiper-img-two {
						width: 100rpx;
						height: 100rpx;
						border: 2rpx solid #FAFAFA;
						margin: 0 12rpx 0 0;
					}
				}

				.blank-box {
					width: 100%;
					height: 34rpx;
					position: absolute;
					left: 0;
					bottom: 0;
					border-radius: 40rpx 40rpx 0 0;
				}
			}

			.content-box {
				width: 100%;
				height: auto;
				padding: 0 32rpx;
				box-sizing: border-box;

				.info-title {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 0 0 16rpx 0;

					.info-title-name {
						width: 434rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						word-break: break-all;
					}

					.like-but {
						display: flex;
						align-items: center;
						padding: 7rpx 20rpx;

						.like-but-text {
							margin: 0 0 0 6rpx;
						}
					}
				}

				.tag-box {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					margin: 0 0 16rpx 0;

					.tag-list {
						display: flex;
						align-items: center;
						padding: 7rpx 10rpx;
					}

					.tag-text {
						margin: 0 0 0 12rpx;
					}
				}

				.introduce {
					display: flex;
					align-items: center;
					margin: 0 0 36rpx 0;

					.distance {
						margin: 0 16rpx 0 0;
					}
				}

				.hobby-box {
					width: 100%;
					height: auto;
					padding: 0 0 12rpx 0;
					border-bottom: 2rpx solid #F9F9F9;

					.hobby {
						width: 100%;
						height: auto;
						padding: 36rpx 25rpx;
						box-sizing: border-box;
						background: linear-gradient(180deg, rgba(246, 246, 246, 0.75) 0%, #FFFFFF 100%);

						.hobby-title {
							margin: 0 0 36rpx 0;
						}

						.hobby-list {
							display: flex;
							align-items: center;
							flex-wrap: wrap;

							.hobby-tag {
								display: flex;
								align-items: center;
								padding: 6rpx 24rpx;
								border: 1rpx solid #E0E0E0;
								margin: 0 20rpx 20rpx 0;

								.hobby-tag-icon {
									margin: 0 8rpx 0 0;
								}

								.hobby-tag-name {}
							}
						}
					}
				}
			}

			.hello-box {
				width: 100%;
				height: auto;
				padding: 18rpx 0 12rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				position: fixed;
				left: 0;
				bottom: 0;

				.hello-box-left {
					width: 332rpx;
					padding: 22rpx 0;
					text-align: center;
				}

				.hello-box-right {
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 0 0 0 22rpx;
				}
			}
		}
	}
</style>