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

<template>
	<view>
		<lf-nav title="搜索" :showIcon="true" @changeHeight="e => nav_height = e"></lf-nav>
		<view class="head">
			<u-search placeholder="请输入商品名或商户名" action-text="取消" v-model="value" @custom="customClick"></u-search>
		</view>
		<view>
			<u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="false" :current="tab_current" @change="tabChange"></u-tabs>
		</view>
		<swiper :current="tab_current" @change="swiperChange" :style="{height: autoHeight}">
			<swiper-item v-for="(tab_item, tab_index) in tab_list" :key="tab_index">
				<scroll-view :scroll-y="true" :style="{height: autoHeight}">
					<view class="scroll-content" v-if="tab_index == 0">
						<lf-waterfall :list="goods_list"></lf-waterfall>
					</view>
					<view class="scroll-content" v-else>
						<view class="shop-box" v-for="(item, index) in 3" :key="index">
							<image class="shop-img"></image>
							<view class="shop-info">
								<view class="lf-line-1">luckin coffee 瑞幸咖啡</view>
								<view>餐饮·美食</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import lfWaterfall from '@/components/lf-waterfall-shopdetails/lf-waterfall.vue';
	export default {
		components: {
			lfWaterfall
		},
		data() {
			return {
				value: '',
				tab_current: 0,
				tab_list: [{
					name: '商品(8)'
				},{
					name: '商户(1)'
				}],
				scrollH: 0,
				nav_height: 0,
				goods_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)"
					}
				]
			}
		},
		computed: {
			autoHeight(){
				return `calc(${this.scrollH}px - ${this.nav_height}px - 124rpx - 86rpx)`;
			}
		},
		onLoad(options){
			let info = uni.getSystemInfoSync();
			this.scrollH = info.screenHeight;
			this.value = options.value || '';
		},
		methods: {
			customClick(){
				this.$toBack();
			},
			tabChange(event){
				this.tab_current = event;
			},
			swiperChange(event){
				this.tab_current = event.detail.current;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head{
		padding: 30rpx 32rpx;
	}
	.scroll-content{
		padding: 30rpx 32rpx;
	}
	.shop-box{
		width: 100%;
		height: 100rpx;
		display: flex;
		&:nth-child(n+2){
			margin-top: 60rpx;
		}
		.shop-img{
			width: 100rpx;
			height: 100rpx;
			background-color: #EEEEEE;
			border-radius: 5rpx;
			margin-right: 15rpx;
		}
		.shop-info{
			width: 570rpx;
			height: 100rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			&>view:nth-child(1){
				font-size: 36rpx;
				color: #222222;
				font-weight: bold;
			}
			&>view:nth-child(2){
				font-size: 24rpx;
				color: #777777;
			}
		}
	}
	
	// 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>