qzw_xcx/pages/index/hotel.vue

<template>
	<view>
		<scroll-view  style="height: 100vh;" class="floor-list"
		 :scroll-top="scrollTop" scroll-y="true"  @scroll="scroll"  @scrolltoupper="upper" @scrolltolower="lower"
		 refresher-enabled="true">
	   <van-sticky class="titleFixed">
	      <van-nav-bar offset-top="100" title="标题" left-text="返回" left-arrow>
	        <van-icon name="search" slot="right" />
	      </van-nav-bar>
	   </van-sticky>
	   
	   <view class="scrollswiper">
	   		 <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
	   			<swiper-item>
	   				<view style="height: 100%;" class="swiper-item uni-bg-red">A</view>
	   			</swiper-item>
	   			<swiper-item>
	   				<view style="height: 100%;" class="swiper-item uni-bg-green">B</view>
	   			</swiper-item>
	   			<swiper-item>
	   				<view style="height: 100%;" class="swiper-item uni-bg-blue">C</view>
	   			</swiper-item>
	   		 </swiper>
	   </view>
	   
	   
	   <view class="tip">
		   <view style="font-size: 36upx;color: #303133;">华南城市酒店</view>
		   <view>
			   <uniIcon type="star" size="22" color="#909399"></uniIcon>
		   </view>
	   </view>
	   
	   <view>
	   		   <van-tabs :active="active" @click="onChange">
	   			 <van-tab  name="1" title="服务">
				  <view>
				  	<view class="giveList">
				  		<view class="giveItem">
				  		  <image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553409398864&di=4a12763adccf229133fb85193b7cc08f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201703%2F19%2F20170319150032_MNwmn.jpeg" style="width:100%;height: 100upx;background: #909399"></image>
				  		  <p style="text-align: center;">商品销售</p>
				  		</view>
				  	 	
				  	</view>
				  
				  <view style="padding: 40upx 18upx;">
					  <view v-for="(tab,index) in tabBars" :key="tab.id"
					   class="swiper-tab-list"
					   :class="tabIndex==index ? 'active' : ''"
					   :id="tab.id" 
					   :data-current="index"
					   @click="tapTab">
					   {{tab.name}}
					  </view>
					<!--  <van-dropdown-menu>
					    <van-dropdown-item  :value="value1" :options="option1" />
					    <van-dropdown-item  :value="value1" :options="option1" />
					  </van-dropdown-menu> -->
					  
					  <view>
						  <view class="listType">
							  <view>
								<image src="" ></image>  
								<view>商品描述</view>
								<view>￥25.00</view>
							  </view>
							  
						  </view>
					  </view>
				  </view>
				   
				 
				  
				  </view> 
				  
				 </van-tab>
	   			 <van-tab  name="2" title="评价">
					 
					 
				 </van-tab>
	   			 <van-tab  name="3" title="酒店信息">
					 
					 
				 </van-tab>
	   		   </van-tabs>
	   </view>
	   <van-dropdown-menu>
	       <van-dropdown-item  title="分类" >
	   		 <!-- <van-cell title="全部"></van-cell>
	   		  <van-cell title="包邮"></van-cell>
	   		  <van-cell title="自费"></van-cell> -->
	   	 </van-dropdown-item>
	   </van-dropdown-menu>
	   <commoNar :option1 = 'option1' :menu = 'menu' />
	   </scroll-view>
	   
	</view>
</template>
  
<script>
	import uniIcon from '@/component/uni-icon/uni-icon.vue'
	import commoNar from '@/component/commoNar.vue'
	export default {
		components: {
			uniIcon,
			commoNar
		},
		data() {
			return {
				tabIndex: 0,
				menu: [{
					name: '综合',
					id: '0'
				}, {
					name: '上新',
					id: '1'
				}, {
					name: '价格',
					id: '2'
				},
				{
					name:'分类',
					id:'3'
				}
				],
				option1: [
				      { text: '全部', value: 1 },
				      { text: '商品销售', value: 2 },
					  
				    ],
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				active: 1,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				 option1: [
				      { text: '全部商品', value: 0 },
				      { text: '新款商品', value: 1 },
				      { text: '活动商品', value: 2 }
				    ],
				    value1: 0
			}
		},
		methods: {
			tapTab(e) {
				console.log(e);
				this.tabIndex = e.currentTarget.id;
			},
			onChange(event) {
					this.active = event.detail.name;
					console.log(this.active)
			},
			upper(e) {
				console.log(e)
				console.log("顶部")
			},
			
			// 滚到底部
			lower(e) {
				console.log("底部")
			},
			
			// 滚动时触发
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
		}
	}
</script>
  
<style>
	.scrollswiper {
		width: 100%;
		position: relative;
	}
	.titleFixed {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99;
		padding-top: 0;
		background-color: transparent;
	}
	.swiper {
		height: 300upx;
	}
	.swiper-item {
		display: block;
		height: 100%!important;
		line-height: 300upx;
		text-align: center;
	}
		
	.tip {
		display: flex;
		justify-content: space-between;
		padding: 36upx 32upx;
	}
	.giveList {
	    padding: 10upx  12upx;
		display: flex;
		flex-wrap: wrap;
	}
	.giveItem {
		width: 18%;
		height: 120upx;
		margin: 10upx 20upx;
		/* background-color: #909399 */
	}
	.active {
		color: #F76260;
	}
		
	.listType {
	}
</style>