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: calc(100vh - 100px);"
			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>
			<view v-if="!ispull" style="padding: 0 15upx;" class="fontcenter">没有更多文章了</view>
		</scroll-view>
		<!-- 		 <view v-if="ispull"  class="fontcenter">加载中...</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 article_thumb = items.article_thumb;
			let ac_id = items.ac_id;
			let name = '';
			this.typelist.forEach((item, index) => {
				if (item.ac_id == ac_id) {
					name = item.ac_name;
				}
			});
			//  :src=" pictureUrl + '/' + item.article_thumb"
			uni.navigateTo({
				url: `/pages/myone/onedetail?id=${article_id}&name=${name}&article_thumb=${article_thumb}`
			});
		},
		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>