WenWuGuanJia/xueYuan_fenbao/wenWu/GengDuoRenWu.vue

<template>
	<view class="box">
        <u-navbar title="历史人物" :placeholder="true"  bgColor="rgba(255,255,255,0.3)"  :autoBack="true"
			titleStyle="font-weight:bold;color:#000000"></u-navbar>
		<view>
			<view>
				<u-swiper
					:list="bannerlist"
					imgMode="scaleToFill"
					:height="160"
					:indicator="true"
					radius="5"
					:autoplay="true"
					:circular="true"
					indicatorStyle="bottom: 10px"
					indicatorMode="dot"
					indicatorActiveColor="#fff"
					indicatorInactiveColor="rgba(255, 255, 255, 0.35)"
				></u-swiper>
			</view>
		</view>

			<view style="margin-top: 10px; margin-left: 10px;">
				<view class="boxs">
					<view @click="expertDetails(item.id)" v-for="(item,index) in peoplelist" :key="item.id">
						<image style="width: 380rpx; height: 320rpx" mode="aspectFill" :src="item.image"  >
						</image>
						
						<view class="flex justify-between">
							<view style="margin-top:10rpx;padding: 10rpx;">
								{{item.title}}
							</view>
							<view style="margin-top:10rpx;padding: 10rpx;">{{item.age}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let that;
	export default {
		data() {
			return {
				page:1,
				isLoading:false,
				bannerlist:[
					'https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/renwu.jpg'
				],
				peoplelist:[],
				
			}
		},
		onLoad(){
			that=this;
			this.getContentList();
			
		},
		methods: {
			getContentList() {
				this.isLoading=true
				this.$api.getContentList({ page: this.page, pageSize: 10, main_body_id: 1, model_id: 7, main_body_column_id: 39 }, function (res) {
					// console.log(res, '人物');
					that.isLoading=false
					that.peoplelist = [...that.peoplelist,...res.data];
				});
			},

		
		// 人物详情
		expertDetails(id) {
			uni.navigateTo({
				url: '/xueYuan_fenbao/wenWu/renWuXiangQing?id=' + id
			});
		},
		
		},
		/* 页面触底 */
		onReachBottom() {
			if (this.isLoading) {
				return;
			} else {
				this.page++;
				this.getContentList();
			}
		},
	}
</script>

<style>
	.box {
		width: 100%;
		padding-bottom: 50rpx;
		background-image: url("https://huli-app.wenlvti.net/app_static/wuyuan/static/shouhu/wyj-feiyi3-001.png");
		background-size: 100% 100%;
		background-repeat: repeat-y;
		height: auto;
	}

	.boxs {
		display: flex;
		justify-content: space-between;
		margin-right: 10px;
		flex-wrap: wrap;
	}

	.boxs>view {
		width: 48%;
		border-radius: 14px;
		overflow: hidden;
		background-color: white;
		margin-bottom: 20px;
	}
	.body {
		background-image: url("https://huli-app.wenlvti.net/app_static/wuyuan/static/wenwu/wyj-jiemian1-BJ.png");
		background-size: 100% 100%;
		background-attachment: fixed;
		height: 900px;
	
	}/deep/.u-swiper-indicator__wrapper__dot--active {
	width: 5px !important;
}
</style>