lcoco/pages/wallet/wave-point.vue

<template>
	<view class="wave-point flex-common-css box-sizing-border iPhone-bottom">
		<Nav class='nav-view' :title="isScroll?'波点兑换中心':''" :titleColor="isScroll?'#333':'#fff'" 
		:bgckgroundBox="isScroll?'#fff':'transparent'" :rightShow='true' :rightType='2'>
			<template v-slot:right>
				<view class="nav-right-box sys-size-24" :class="isScroll?'view-n':'view-s'">兑换记录</view>
			</template>
		</Nav>
		<image class="bg-img" src="@/static/img/wallet/bd-bg.png" mode="aspectFill"></image>
		<view class="nav-box">
			<view :class="navId === item.id?'text-s':'text-n'" 
			v-for="(item,i) in navList" :key="i" @click="select(item,i)">
				{{item.name}}
			</view>
			<view class="nav-only" :style="{left:navLeft+'rpx',}"></view>
		</view>
		<scroll-view scroll-y="true" class="list-scroll" @scrolltolower="scrolltolower">
			<view class="list-home">
				<view class="list-box" v-for="(item,i) in 10" :key="i">
					<view class="box-top">
						<view class="box-1 sys-size-24">剩余0</view>
						<image class="type-3" src="@/static/img/circle/1.png" mode="scaleToFill"></image>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				isScroll:false,
				navId:1,
				navIndex:0,
				navLeft:110, //差值250 起点110
				navList:[{name:'特权',id:1},{name:'道具',id:2},{name:'其他',id:3},],
			}
		},
		methods:{
			scrolltolower(){
				console.log('触底');
			},
			select(item,i){
				if(this.navId!=item.id){
					this.navId =item.id;
					this.navIndex = i;
					this.navLeft = i * 250 + 110;
				}
			},
		},
	}
</script>

<style scoped lang="scss">
	.wave-point{
		position: relative;
		.bg-img{
			width: 100%;
			height: 690rpx;
		}
		.nav-view{
			position: absolute;
			top: 0;
			left: 0;
			.nav-right-box{
				width: 120rpx;
				height: 34rpx;
				background: rgba(235,235,235,0.14);
				border-radius: 200rpx;
				line-height: 34rpx;
				text-align: center;
			}
			.view-s{
				border: 1rpx solid #F9F9F9;
				color: #fff;
			}
			.view-n{
				border: 1rpx solid #333;
				color: #333;
			}
		}
		.nav-box{
			background-color: #081432;
			width: 100%;
			height: 116rpx;
			display: flex;
			align-items: center;
			position: relative;
			.nav-only{
				width: 36rpx;
				height: 4rpx;
				background-color: #fff;
				position: absolute;
				bottom: 20rpx;
				transition: left 0.5s;
			}
			view{
				flex: 1;
				text-align: center;
				line-height: 116rpx;
			}
			.text-s{
				color: #fff;
				font-weight: 600;
				font-size: 36rpx;
				transition: all 0.5; 
			}
			.text-n{
				color: #525A6E;
				font-size: 32rpx;
				transition: all 0.5; 
			}
		}
		.list-scroll{
			background-color: #081432;
			flex: 1;
			overflow: auto;
			.list-home{
				display: flex;
				justify-content: space-between;
				flex-flow: row wrap;
				box-sizing: border-box;
				padding: 0 32rpx;
				.list-box{
					width: 333rpx;
					height: 444rpx;
					background: url('@/static/img/wallet/shop-bg.png') no-repeat;
					background-size: 100% 100%;
					margin-bottom: 28rpx;
					.box-top{
						width: 313rpx;
						height: 264rpx;
						margin:2rpx 8rpx 10rpx 10rpx;
						position: relative;
						.type-3{
							width: 100%;
							height: 100%;
						}
						.box-1{
							z-index: 100 !important;
							position: absolute;
							bottom: -2rpx;
							right: -2rpx;
							width: 84rpx;
							height: 36rpx;
							line-height: 36rpx;
							text-align: center;
							border-radius: 10rpx 0rpx 0rpx 0rpx;
							border: 2rpx solid #1F3F7B;
							color: #5D6473;
							background: #182137;
						}
					}
				}
			}
			
		}
	}
</style>