bigdata_WX/pages/expertDiagnosis/wormcase.vue

<template>
	<view>
		<view class="status_bar"></view>
		<view class="" style="position: relative;top: 64px;">
			<view style="position: fixed;z-index: 100;">
				<uni-nav-bar @clickLeft="clickLeft" left-icon="back" left-text="返回" :title="title"></uni-nav-bar>
			</view>
			<view class="particulars">
				<view class="particulars_item" v-for="(item,index) in content" :key="index" @click="introduce(item.id)">
					<view class="imgs">
						<image :src="'http://static.yfpyx.com/bigdata_app'+'/image/loading-2.gif'" mode="" class="imgbg"></image>
						<image :src="item.img_urls" mode="" class="imgs_img"></image>
					</view>
					<p>{{item.name}}</p>
				</view>
			</view>
		</view>
		<view class="top" v-if="isTop" @click="top">
			<image :src="'http://static.yfpyx.com/bigdata_app'+'/image/6209a98f0cb3b5086f2ca36152c9269.png'" mode=""></image>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				title: '',
				content: [],
				data: {
					code: null,
					page: null
				},
				isTop:false
			}
		},
		methods: {
			async getCooperation(data) {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=pest.pests.pests_search',
					data: {
						code: data.code,
						page: data.page
					}
				})
				this.content = this.content.concat(res.data)
			},
			clickLeft() {
				uni.navigateTo({
					url: "./index"
				})
			},
			introduce(id) {
				uni.navigateTo({
					url: "./introduce?id=" + id + "&title=" + this.title
				})
			},
			top() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 500
				})
			},
		},
		onLoad(option) {
			this.title = option.name
			if (option.name == "虫情百科") {
				this.data.code = 2
				this.data.page = 1
				this.getCooperation(this.data)
			} else {
				this.data.code = 1
				this.data.page = 1
				this.getCooperation(this.data)
			}
		},
		onReachBottom() {
			this.data.page++
			this.getCooperation(this.data)
		},
		onPageScroll(e) { //nvue暂不支持滚动监听，可用bindingx代替
			if (e.scrollTop > 200) { //距离大于200时显示
				this.isTop = true
			} else { //距离小于200时隐藏
				this.isTop = false
			}
		},
	}
</script>
<style lang="scss">
	.particulars {
		width: 100%;
		position: relative;
		top: 88rpx;
		display: flex;
		flex-wrap: wrap;

		.particulars_item {
			width: 50%;
			padding: 20rpx;
			box-sizing: border-box;

			.imgs {
				width: 100%;
				height: 220rpx;
				position: relative;

				.imgbg {
					width: 50%;
					height: 50%;
					position: absolute;
					top: 25%;
					left: 25%;
				}

				.imgs_img {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
				}
			}

			p {
				font-size: 24rpx;
			}
		}
	}

	.top {
		position: fixed;
		right: 30px;
		bottom: 100px;
		z-index: 100;

		image {
			width: 100rpx;
			height: 100rpx;
		}
	}
</style>