lcoco/pages/wallet/gift-wall.vue

<template>
	<view class="gift-wall-box flex-common-css box-sizing-border iPhone-bottom sys-background-black">
		<Nav title='礼物墙' titleColor='#fff' bgckgroundBox='#141414'></Nav>
		<view class="info-box box-sizing-border">
			<view class="box-head">
				<view class="head-left">
					<image src="../../static/img/circle/1.png" mode="scaleToFill"></image>
					<view class="">
						<view class="sys-size-32 sys-weight-600 sys-color-white sys-webkit-box head-name">1111111111我我我我我我我</view>
						<view class="">
							<text class="sys-size-24 sys-color-gray-9">礼物收益：</text>
							<text class="sys-color-yellow sys-size-24">1波点</text>
						</view>
					</view>
				</view>
				<view class="head-right sys-size-28 sys-color-gray-3 sys-radius-200 sys-background-yellow">波点兑换</view>
			</view>
			<view class="box-nav">
				<view class="sys-size-32 nav-name" :class="navId === item.id?'s-view':'n-view'"
				v-for="(item,i) in navList" :key="i" @click="selectFun(item,i)">{{item.name}}</view>
				<view class="xian" :class="navIndex===0?'left-1':'left-2'"></view>
			</view>
			<scroll-view scroll-y="true" class="list-scroll" @scrolltolower="scrolltolower">
				<view class="list-home">
					<view class="list-box box-sizing-border"
					v-for="(item,i) in list" :key="i">
						<image :src="item.url" mode="aspectFill" :class="item.num>0?'':'c-view'"></image>
						<view class="sys-size-28 sys-color-white" :class="item.num>0?'':'c-view'">心动信号</view>
						<view class="sys-size-20 sys-color-white" :class="item.num>0?'':'c-view'">x{{item.num}}</view>
					</view>
					<view class="list-only" v-if="list.length>3&&list.length%3!=0"></view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>	

<script>
	export default {
		data(){
			return{
				info:{},
				list:[
					{'num':1,'url':'/static/img/temporary/gift1.png'},
					{'num':0,'url':'/static/img/temporary/gift2.png'},
					{'num':0,'url':'/static/img/temporary/gift3.png'},
				],
				
				total:0,
				page:1,
				navList:[{name:'心动礼物',id:1,},{name:'排队礼物',id:2,}],
				navId:1,
				navIndex:0,
			}
		},
		methods:{
			scrolltolower(){
				console.log('触底');
			},
			selectFun(item,i){
				this.navId = item.id;
				this.navIndex = i;
			},
		}
	}
</script>

<style scoped lang="scss">
	.gift-wall-box{
		.info-box{
			flex: 1;
			overflow: auto;
			padding: 32rpx;
			display: flex;
			flex-direction: column;
			.box-head{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.head-left{
					display: flex;
					align-items: center;
					image{
						width: 168rpx;
						height: 168rpx;
						border-radius: 50%;
						margin-right: 34rpx;
					}
					.head-name{
						width: 252rpx;
						margin-bottom: 10rpx;
					}
				}
				.head-right{
					width: 142rpx;
					height: 52rpx;
					line-height: 52rpx;
					text-align: center;
				}
			}
			.box-nav{
				margin-top: 44rpx;
				display: flex;
				position: relative;
				.xian{
					position: absolute;
					width: 48rpx;
					height: 4rpx;
					background-color: #fff;
					bottom: 0;
				}
				.left-1{
					left: 40rpx;
					transition: all 0.5s; 
				}
				.left-2{
					left: 210rpx;
					transition: all 0.5s; 
				}
				.nav-name{
					margin-right: 40rpx;
					padding-bottom: 20rpx;
				}
				.s-view{
					color: #fff;
				}
				.n-view{
					color: #707070;
				}
			}
			.list-scroll{
				height: 100%;
				overflow: auto;
				padding-top: 20rpx;
				.list-home{
					display: flex;
					justify-content: space-between;
					flex-flow: row wrap;
				}
				.list-box{
					width: 212rpx;
					height: 292rpx;
					background: #3D3D3D;
					border-radius: 20rpx;
					margin-bottom: 34rpx;
					text-align: center;
					padding-top: 32rpx;
					image{
						width: 120rpx;
						height: 120rpx;
						margin-bottom: 20rpx;
					}
					.c-view{
						filter: grayscale(100%);
					}
				}
				.list-only{
					width: 212rpx;
					height: 292rpx;
				}
			}
		}
	}
</style>