CjyTravel/subPageA/method/methodlist/methodClass.vue

<template>
	<view class="v-pages-bg p-b-24">
		<!-- 列表 -->
		<mescroll-uni :up="upOption" @down="downCallback" @up="upCallback" :fixed="false">
			<view class="v-method-list">
				<view class="list_item row" v-for="(item,index) in data_list" :key="index" @click="gotoPages(item)">
					<view class="item_image">
						<view class="item-recommend" v-if="item.isrecommend=='YES'">热门推荐</view>
						<image class="img" :src="rootPath+item.logo" mode="widthFix"></image>
					</view>
					<view class="item_content col">
						<view class="title">{{item.title}}</view>
						<view class="dec">{{item.subtitle}}</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	// 自定义的mescroll-xinlang.vue
	import MescrollUni from '@/components/mescroll-diy/mescroll-xinlang.vue';
	export default {
		components: {
			MescrollUni
		},
		data() {
			return {
				//公共路径
				rootPath: this.$config.ROOTPATH,
				//数据滚动
				mescroll: undefined,
				downOption: {
					auto: false //是否在初始化完毕之后自动执行下拉回调callback; 默认true
				},
				upOption: {
					auto: true //是否在初始化完毕之后自动执行下拉回调callback; 默认true
				},
				//数据					
				data_list: [], //列表数据
				parames: {
					pagesize: 10,
					pageno: 1,
					noData: false,
					loading: false,
					finished: false,
					typeId: undefined,
					userkey: this.$param.userkey,
				},
			};
		},
		onLoad: function(options) {
			this.parames.typeId = options.guid
		},
		methods: {
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				this.mescroll = mescroll
				this.parames.pageno = 1
				this.data_list = []
				this.getListData();
				// #ifdef H5
				this.top = uni.upx2px(100 + 88) + 'px'; // H5的高度需加上 88的标题栏
				// #endif
				// #ifndef H5
				this.top = uni.upx2px(100) + 'px'; // 非H5不必加
				// #endifL
				setTimeout(() => {
					this.mescroll.endSuccess();
					this.top = 0;
				}, 2500);
			},
			/*上拉刷新的回调 */
			upCallback(mescroll) {
				this.mescroll = mescroll
				this.parames.pageno = this.mescroll.num
				this.getListData();
			},
			// 获取列表数据
			getListData() {
				console.log('adsf',this.parames)
				this.$Request.get(this.$config.selectMessageWalkthroughType, this.parames, '', '', false, true).then(res => {
					const curPageData = res.data || [] // 当前页数据
					if (this.mescroll.num == 1) this.data_list = []; // 第一页需手动制空列表
					this.data_list = [...this.data_list, ...curPageData]
					setTimeout(() => {
						this.mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
					}, 1000);
				}).catch(() => {
					this.mescroll.endErr(); // 请求失败, 结束加载
				});
			},
			// 跳转详情页面
			gotoPages(val) {
				uni.navigateTo({
					url: "/subPageA/method/methodDetail/methodDetail?guid=" + val.guid
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #f5f6fa;
	}

	.slide-top {
		position: absolute;
		right: 40rpx;
		top: 40rpx;

		.slide-title {
			font-size: 70rpx;
			font-weight: 600;
			color: #fff;
		}

		.slide-subTitle {
			font-size: 32rpx;
			color: #fff;
		}
	}

	.scroll-view {
		top: 200rpx;
	}

	.lh-swiper {
		width: 100%;
		height: 400rpx;
		overflow: hidden;
		position: relative;
	}

	.lh-swiper .slide-image {
		width: 100%;
		height: 100%;
	}

	.v-method-class {
		box-sizing: border-box;
		padding: 0 24rpx;

		.list_item {
			position: relative;
			flex: 0 0 240rpx;
			width: 240rpx;
			height: 150rpx;
			margin-right: 24rpx;
			border-radius: 20rpx;

			.item-bottom {
				position: absolute;
				left: 0;
				padding-left: 24rpx;
				bottom: 10rpx;
				padding: 0 10rpx;
			}

			.item_name {
				font-size: 30rpx;
				font-weight: bold;
				color: #fff;
			}

			.item_image {
				width: 240rpx;
				height: 150rpx;
				border-radius: 20rpx;
				overflow: hidden;

				.img {
					width: 100%;
				}
			}

			.item_desc {
				font-size: 24rpx;
				color: #fff;
			}
		}
	}

	.v-method-list {
		padding: 0 24rpx;

		.list_item {
			margin-bottom: 24rpx;
			border-radius: 10rpx;
			background-color: #fff;
			height: 180rpx;
			overflow: hidden;
			background-color: #fff;
			box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, .1);

			.item_image {
				position: relative;
				width: 270rpx;
				flex: 0 0 270rpx;
				height: 180rpx;
				margin-right: 24rpx;
				overflow: hidden;

				.item-recommend {
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100%;
					height: 40rpx;
					padding: 0 20rpx 0 40rpx;
					color: #fff;
					line-height: 40rpx;
					font-size: 24rpx;
					background: linear-gradient(to right, rgba(224, 75, 0, .7), rgba(224, 75, 0, 0));

					&:before {
						content: "";
						position: absolute;
						left: 10rpx;
						top: 50%;
						transform: translate(0, -50%);
						width: 24rpx;
						height: 24rpx;
						background: url('@/static/animg/daolan/icon-zan.png');
						background-repeat: no-repeat;
						background-size: cover;
					}
				}

				.img {
					width: 100%;
				}
			}

			.item_content {
				padding: 24rpx 24rpx 0 0;

				.title {
					font-size: 30rpx;
					margin-bottom: 10rpx;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}

				.dec {
					margin-top: 10rpx;
					font-size: 24rpx;
					color: #666;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					/* 显示的行数 */
					-webkit-box-orient: vertical;
					overflow: hidden;
				}
			}
		}
	}
</style>