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 disabled="true"  confirm-type="search" class="input" type="text" placeholder="搜索文章" @click="confirm" />
	   	 </view>
	    </view>
	   <view>
		   <van-tabs :active="active" @change="onChange">
			 <van-tab  v-for="(item,index) in typelist"  :key="index" :name="index" :title="item.ac_name"></van-tab>
		   </van-tabs>
	   </view>
		  <scroll-view  class="floor-list"
		   :scroll-top="scrollTop" style="height: 90vh;" scroll-y="true"  @scroll="scroll"  @scrolltoupper="upper" @scrolltolower="lower"
		   :refresher-enabled="false">
			<view v-for="(item,indedx) in acrelist" :key="indedx" @click="goIndex(item)">
			   <view class="hotelList">
					 <view class="hotleLeft">
						 <image  style="width: 214upx;height: 152upx;" :src=" pictureUrl + '/' + item.article_thumb"/>
					 </view>
					 <view class="hotelright">
						<view style="font-size: 28upx;color: #303133;">{{item.article_title}}</view>
						<view style="color: #999;">
						   {{item.article_time}}
						</view>
			   </view>
			</view>
			</view>
		 </scroll-view>
		 <Gobacktop @getop="getop" v-if="isTop" />

   </view>
</template>
<script>
	import uniIcon from '@/component/uni-icon/uni-icon.vue'
	import Gobacktop from '@/component/Gobacktop.vue'

	export default {
		components: {
			uniIcon,
			Gobacktop
		},
		data() {
			return {
				pictureUrl: this.pictureUrl,
				page: 1,
				page_size: 10,
				ac_id:'',
				keyword:'',
				active: 0,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				isTop: false,
				typelist:[],
				acrelist:[],
				ispull: true
		    }
	    },
		onLoad() {
			this.getype(); // 获取文章分类
			this.getlist(); // 获取文章列表
		},
		methods: {
			getop() {
			        this.scrollTop = this.old.scrollTop
			                this.$nextTick(function(){
			                    this.scrollTop=0;
			                });
			        this.isTop = false;
			      },
			goIndex(items) {
				let article_id = items.article_id;
				let ac_id = items.ac_id;
				let name = '';
				this.typelist.forEach((item, index) => {
					if(item.ac_id == ac_id) {
						name = item.ac_name;
					}
				})
				uni.navigateTo({
				        url: `/pages/myone/onedetail?id=${article_id}&name=${name}`
				});
			},
			getype() {
				this.request({
					url: '/v1/entry/news_cate',
					method:'POST',
					success: (res) =>　{
						let array = [{ac_name:'全部'}];
						this.typelist = array.concat(res.data.data);
					}
				})
			},
			getlist() {
				this.request({
					url: '/v1/entry/news',
					method:'POST',
					data: {
						page: this.page,
						page_size: this.page_size,
						ac_id: this.ac_id,
						keyword: this.keyword
					},
					success: (res) => {
						let { data }  = res.data;
						if(data.total_page == data.current_page) {
							this.ispull = false;
						}
						this.acrelist = this.acrelist.concat(data.new_list);
					}
				})
			},
			
			confirm() {
				uni.navigateTo({
					url: './ariclle'
				})
			},
			onChange(event) {
				this.active = event.detail.name;
				if( event.detail.name == 0) {
					this.ac_id = '';
				}else {
					let items = this.typelist[this.active];
					this.ac_id = items.ac_id;
				}
				this.active = event.detail.name;
				this.ispull = true;
				this.page = 1;
				this.acrelist = [];
				this.getlist();
			},
			
			// 滚动到顶部
			upper(e) {
				console.log(e)
				console.log("顶部")
			},
			
			// 滚到底部
			lower(e) {
				this.page = this.page + 1;
				if(this.ispull) {
					this.getlist();
				}
			},
			
			// 滚动时触发
			scroll(e) {
				if(e.detail.scrollTop > 400) {
				          this.isTop = true;
				        }else{ //当距离小于500时显示回到顶部按钮
				          this.isTop = false;
				        }
				this.old.scrollTop = e.detail.scrollTop
			},
		}
    }
</script>
<style>
	
	.hotelList {
		display: flex;
		flex-direction: row;
		padding: 24upx 32upx;
	}
		
	.hotleLeft {
		width: 214upx;
		height: 152upx;
	}
		
	.hotelright {
		padding-left: 16upx;
		display: flex;
		flex-direction: column;
		width: 100%;
		justify-content: space-between;
	}
	.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>