qzw_xcx/pages/myone/oneIndex.vue

<template>
   <view>
	   <view  class="searchType" style="background: #fff;">
	   	 <view class="input-view">
	   	 	<uni-icon type="search" size="22" color="#666666" />
	   	 	<input confirm-type="search" class="input" type="text" placeholder="搜索文章" @confirm="confirm" />
	   	 </view>
	    </view>
	   <view>
		   <van-tabs :active="active" @click="onChange">
			 <van-tab  :name="1" title="标签 1"></van-tab>
			 <van-tab  :name="2" title="标签 2"></van-tab>
			 <van-tab  :name="3" title="标签 3"></van-tab>
			 <van-tab  :name="4" title="标签 4"></van-tab>
		   </van-tabs>
	   </view>
	  
	  <!-- refresher-enabled  开启自定义下拉--> 
		 <scroll-view class="floor-list" 
		  :scroll-top="scrollTop" scroll-y="true"  @scroll="scroll"  @scrolltoupper="upper" @scrolltolower="lower"
		  @refresherabort="onAbort"
		  @refresherrefresh="onRefresh"
		  @refresherpulling="onPulling"
		  refresher-enabled="true">
			<view>
			   <view class="hotelList">
					 <view class="hotleLeft">
						 <image  style="width: 214upx;height: 152upx;" src=""/>
					 </view>
					 <view class="hotelright">
						<view style="font-size: 28upx;color: #303133;">华南城市酒店</view>
						<view>
							07-05 14:58
						</view>
					
			   </view>
			</view>
			</view>
		 </scroll-view>
   </view>
</template>
<script>
	import uniIcon from '@/component/uni-icon/uni-icon.vue'
	export default {
		components: {
			uniIcon
		},
		data() {
			return {
				active: 1,
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
		    }
	    },
		methods: {
			confirm() {
				
			},
			onChange(event) {
				this.active = event.detail.name;
				console.log(this.active)
			},
			// 自定义下拉控件被触发
			onPulling() {
				
			},
			
			// 自定义下拉刷新被触发
			onRefresh() {
				
			},
			
			// 自定义下拉刷新被中止
			onAbort() {
				
			},
			
			// 滚动到顶部
			upper(e) {
				console.log(e)
				console.log("顶部")
			},
			
			// 滚到底部
			lower(e) {
				console.log("底部")
			},
			
			// 滚动时触发
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
		}
    }
</script>
<style>
	
	.hotelList {
		display: flex;
		flex-direction: row;
		padding: 24upx 32upx;
	}
		
	.hotleLeft {
		width: 214upx;
		height: 152upx;
		background-color: #007AFF;
	}
		
	.hotelright {
		padding-left: 16upx;
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	.searchType .input-view {
		width: 85%;
		display: flex;
		background-color: #e7e7e7;
		height: 30px;
		border-radius: 15px;
		padding: 0 4%;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: 30px;
		margin: 24upx auto;
	}
	
	.searchType .input-view .uni-icon {
		line-height: 30px !important;
	}
	
	.searchType .input-view .input {
		height: 30px;
		line-height: 30px;
		width: 94%;
		padding: 0 3%;
	}
</style>