ec.uniapp-master/pages/shop/specialList.vue

<template>
	<view>
		<lf-nav title="活动名称活动名称" :showIcon="true"></lf-nav>
		<view class="cover">
			<image class="img" src="https://picsum.photos/200"></image>
		</view>
		<view>
			<u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="current" @change="tabChange"></u-tabs>
		</view>
		<view class="goods-list">
			<!-- TODO 此处应为渲染多个lf-waterfall组件 -->
			<lf-waterfall :list="list" ref="uWaterfallFather"></lf-waterfall>
		</view>
		<u-back-top :scrollTop="pageScrollTop"></u-back-top>
	</view>
</template>

<script>
	import lfWaterfall from '@/components/lf-waterfall-shopdetails/lf-waterfall.vue';
	export default {
		components: {
			lfWaterfall
		},
		data(){
			return {
				current: 0,
				tab_list: [{
					name: '综合'
				},{
					name: '销量'
				},{
					name: '价格'
				}],
				list: [
					{
						id: 10,
						original_price: "4111.00",
						picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
						pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
						price: "2412.00",
						product_id: 1008,
						sale: 0,
						title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
					},
					{
						id: 10,
						original_price: "4111.00",
						picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
						pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
						price: "2412.00",
						product_id: 1008,
						sale: 0,
						title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
					},
					{
						id: 10,
						original_price: "4111.00",
						picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
						pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
						price: "2412.00",
						product_id: 1008,
						sale: 0,
						title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
					},
					{
						id: 10,
						original_price: "4111.00",
						picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
						pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
						price: "2412.00",
						product_id: 1008,
						sale: 0,
						title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
					},
					{
						id: 10,
						original_price: "4111.00",
						picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
						pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
						price: "2412.00",
						product_id: 1008,
						sale: 0,
						title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
					}
				]
			}
		},
		onLoad(){
			
		},
		methods: {
			tabChange(index){
				this.current = index;
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.cover{
		width: 750rpx;
		height: 245rpx;
		.img{
			width: 100%;
			height: 100%;
		}
	}
	.goods-list{
		padding: 30rpx 32rpx;
	}
	
	// tabs样式
	/deep/.u-scroll-box {
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	}
	/deep/.u-scroll-box .u-tab-bar {
		background-color: #15716E!important;
		width: 80rpx!important;
		position: absolute;
		left: 0;
		bottom: -12rpx;
	}
	
	/deep/.special_tab .u-tabs .u-scroll-box .u-tab-bar {
		background-color: #15716E!important;
		width: 56rpx!important;
		position: absolute;
		height: 5rpx!important;
		left: 8rpx;
		bottom: -4rpx;
	}
	
	/deep/ .u-tab-item {
		font-size: 28rpx!important;
	}
</style>